Bootstrap Tooltips

BY admin
|
Ogłoszenia

W tym tutorialu dowiesz się jak stworzyć tooltipy z Bootstrap.

Tworzenie etykiet narzędziowych z Bootstrap

Wskazówka narzędziowa jest małym okienkiem, które pojawia się, gdy użytkownik umieszcza wskaźnik myszy nad elementem takim jak link lub przycisk, aby dostarczyć podpowiedź lub informację o elemencie, na który jest najechany.

Tooltipy mogą być bardzo pomocne dla nowych odwiedzających twoją stronę, ponieważ umożliwiają użytkownikowi poznanie celu ikon i linków poprzez umieszczenie nad nimi wskaźnika myszy.

Krok 1: Dodanie znacznika Tooltip

Aby utworzyć tooltip, musisz dodać atrybut data-toggle="tooltip" do elementu. Tekst etykiety, który zostałby wyświetlony po najechaniu kursorem, można określić za pomocą atrybutu title.

Tutaj znajduje się standardowy znacznik dodawania etykiety tolltip do hiperłącza.

<a href=”#” data-toggle=”tooltip” title=”Some text”>Najeżdżaj na mnie</a>

Podobnie, można dodać tooltipy do innych elementów takich jak przyciski, ikony, itp.

Uwaga: Ze względów wydajnościowych tooltip data-apis są opt in, czyli aby używać tooltipów musisz je zainicjalizować metodą tooltip().

Krok 2: Wyzwalanie Tooltipów

Tooltipy mogą być wyzwalane przez JavaScript – po prostu wywołaj metodę tooltip() Bootstrap z id, class lub dowolnym selektorem CSS elementu docelowego w swoim kodzie JavaScript.

Możesz albo inicjalizować tooltipy pojedynczo albo wszystkie za jednym zamachem. Poniższy kod jQuery zainicjuje wszystkie tooltipy na stronie, wybierając je przez ich atrybut data-toggle.

Przykład

Wypróbuj ten kod ” 

<script>$(document).ready(function(){ $('').tooltip(); });</script>

– Dane wyjściowe powyższego przykładu będą wyglądały mniej więcej tak:

Ustawianie kierunków tooltipów

Możesz ustawić, aby tooltipy pojawiały się na górze, po prawej, na dole i po lewej stronie elementu.

Ustawianie etykiet narzędzi za pomocą atrybutów danych

Następujący przykład pokaże ci, jak ustawić kierunek etykiet narzędzi za pomocą atrybutów danych.

Positioning of Tooltips via JavaScript

Następujący przykład pokaże, jak ustawić kierunek etykietek narzędziowych za pomocą JavaScript.

Opcje

Istnieją pewne opcje, które mogą być przekazane do tooltip()metody Bootstrap w celu dostosowania funkcjonalności wtyczki etykietek narzędziowych.

Name Type Default Value Description
animation boolean true Zastosuj przejście CSS fade do tooltipa.
html boolean false Wstaw html do tooltipa. Jeśli false, do wstawienia zawartości do DOM zostanie użyta metoda text() jQuery. Użyj tekstu, jeśli obawiasz się ataków XSS.
placement string | function ’top’ Ustawia pozycję tooltipa – góra | dół | lewo | prawo | auto. Gdy podana jest wartość „auto”, spowoduje to dynamiczną zmianę orientacji etykiety.
selector string false Jeśli podany jest selektor, obiekty etykiety zostaną dołączone do określonych celów.
title string | function ” Ustawia domyślną title wartość, jeśli atrybut title nie jest obecny.
trigger string ’hover focus’ Określa sposób wyzwalania etykiety narzędziowej – kliknięcie | hover | focus | ręczne. Uwaga: można przekazać kilka typów wyzwalaczy oddzielonych spacjami.
delay number | object 0

Czas opóźnienia w wyświetlaniu i ukrywaniu etykietki (ms) – nie dotyczy wyzwalaczy ręcznych.

Jeżeli podano liczbę, opóźnienie jest stosowane zarówno do ukrywania/pokazywania Struktura obiektu jest:
delay: { show: 500, hide: 100 }
container string | false false Dodaje tooltip do określonego elementu. container: 'body'
template string

'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Podstawowy HTML do użycia podczas tworzenia tooltipa. Tytuł tooltipa zostanie wstawiony do elementu o klasie .tooltip-inner, a element o klasie .tooltip-arrow stanie się strzałką tooltipa.

Najbardziej zewnętrzny element wrappera powinien mieć klasę .tooltip.
viewport string | object { selector: 'body', padding: 0 } Utrzymuje tooltip w granicach tego elementu. Przykład: viewport: '#viewport' lub { selector: '#viewport', padding: 0 }
offset number | string 0 Offset etykiety narzędziowej względem jej celu.
fallbackPlacement string | array ’flip’ Pozwala określić, która pozycja zostanie użyta przez Poppera podczas fallback.
boundary string | element ’scrollParent’ Ograniczenie ograniczenia przepełnienia etykiety narzędzia. Akceptuje wartości 'viewport', 'window', 'scrollParent' lub referencję HTMLElement (tylko JavaScript).
sanitize boolean true Włącza lub wyłącza sanityzację. Jeśli włączona, opcje 'template’ i 'title’ będą sanityzowane.
whiteList object value Object, który zawiera dozwolone atrybuty i tagi.
sanitizeFn null | function null Pozwala określić własną funkcję sanityzacji.

Możesz ustawić te opcje poprzez użycie atrybutów danych lub JavaScript. Dla ustawienia opcji tooltipów przez atrybuty danych, po prostu dołącz nazwę opcji do data- wraz z właściwą wartością, jak data-animation="false", data-placement="bottom" itd.

Jednakże JavaScript jest bardziej preferowanym sposobem ustawiania tych opcji, ponieważ zapobiega powtarzaniu pracy. Zobacz metodę tooltip $().tooltip(options) w sekcji poniżej, aby dowiedzieć się, jak ustawić opcje dla tooltip przy użyciu JavaScript.

Metody

To są standardowe metody tooltip Bootstrapa:

$().tooltip(options)

Ta metoda dołącza handler tooltip do grupy elementów. Pozwala również na ustawienie opcji dla etykietek narzędziowych, dzięki czemu można je dostosować do własnych potrzeb.

Następujący przykład wstawi określony tekst wewnątrz etykiety narzędziowej, jeśli wartość atrybutu title jest pominięta lub brakuje jej w wybranych elementach:

Następujący przykład pokaże, jak umieścić zawartość HTML wewnątrz etykiety narzędziowej:

Następujący przykład pokaże, jak kontrolować czas pokazywania i ukrywania etykiety narzędziowej za pomocą opcji delay etykiety narzędziowej poprzez JavaScript.

Następujący przykład pokaże, jak można utworzyć własny szablon dla etykiet narzędziowych Bootstrapa zamiast używać domyślnego.

Następujący przykład wstawi dynamicznie generowany kod HTML etykiety narzędziowej na końcu elementu .wrapper zamiast elementu <body>.

Uwaga: Nadpisanie domyślnej wartości opcji Tooltip container nie powoduje żadnej widocznej różnicy na stronie. Aby zobaczyć rzeczywisty rezultat, musisz sprawdzić wynikowy DOM za pomocą narzędzi Firebug lub Developer.

Podobnie, możesz ustawić inne opcje dla tooltipów używając metody $().tooltip(options). Sprawdźmy pozostałe metody wtyczki tooltip Bootstrapa.

.tooltip(’show’)

Ta metoda ujawnia tooltip elementu.

Przykład

Wypróbuj ten kod ” 

<script>$(document).ready(function(){ $(".show-tooltip").click(function(){ $("#myTooltip").tooltip('show'); }); });</script>

.tooltip(’hide’)

Ta metoda ukrywa etykietę narzędziową elementu.

Przykład

Wypróbuj ten kod ” 

<script>$(document).ready(function(){ $(".hide-tooltip").click(function(){ $("#myTooltip").tooltip('hide'); }); });</script>

.tooltip(’toggle’)

Ta metoda przełącza tooltip elementu.

Przykład

Wypróbuj ten kod ” 

<script>$(document).ready(function(){ $(".toggle-tooltip").click(function(){ $("#myTooltip").tooltip('toggle'); }); });</script>

.tooltip(’dispose’)

Ta metoda ukrywa i niszczy etykietę narzędziową elementu.

.tooltip(’enable’)

Ta metoda nadaje etykiecie narzędziowej elementu możliwość wyświetlania. Tooltipy są domyślnie włączone.

Przykład

Wypróbuj ten kod ” 

<script>$(document).ready(function(){ $(".enable-tooltip").click(function(){ $("#myTooltip").tooltip('enable'); }); });</script>

.tooltip(’disable’)

Ta metoda usuwa możliwość wyświetlania tooltipa elementu. Etykieta będzie mogła być wyświetlona tylko wtedy, gdy zostanie ponownie włączona.

.tooltip(’toggleEnabled’)

Ta metoda przełącza możliwość wyświetlania lub ukrywania etykiety narzędziowej elementu.

.tooltip(’update’)

Ta metoda aktualizuje pozycję tooltipa elementu.

Przykład

Wypróbuj ten kod ” 

<script>$(document).ready(function(){ $(".update-tooltip").click(function(){ $("#myTooltip").tooltip('update'); }); });</script>

Zdarzenia

Klasa tooltipa w Bootstrapie zawiera kilka zdarzeń do podpięcia się do funkcjonalności tooltipa.

Event Description
show.bs.tooltip To zdarzenie wystrzeliwuje natychmiast po wywołaniu metody instancji show.
shown.bs.tooltip To zdarzenie jest uruchamiane, gdy etykieta narzędziowa stała się widoczna dla użytkownika. Poczeka, aż proces przejścia CSS zostanie w pełni zakończony, zanim zostanie zwolniony.
hide.bs.tooltip To zdarzenie jest zwolnione natychmiast, gdy metoda instancji hide została wywołana.
hidden.bs.tooltip To zdarzenie jest zwolnione, gdy etykieta narzędziowa została ukryta przed użytkownikiem. Będzie ono czekać, aż proces transformacji CSS zostanie w pełni zakończony, zanim zostanie odpalone.
inserted.bs.tooltip To zdarzenie jest odpalane po zdarzeniu show.bs.tooltip, gdy szablon tooltip został dodany do DOM.

Następujący przykład wyświetli użytkownikowi komunikat ostrzegawczy, gdy przejście wygaszania etykiety narzędziowej zostanie całkowicie zakończone.

Ogłoszenia

.