Tworzenie tooltipa
Następnym komponentem wbudowanym w Bootstrapa są tooltipy. Czym one się wyróżniają? A “dymkiem” z tekstem, który wyświetla się po najechaniu na dany element – przykładowo na przycisk bądź link.
W naszym frameworku, podobnie jak wcześniej przy innych komponentach Javascript wykorzystuje się atrybuty. Przy tooltipach najważniejsze są data-toggle z wartością tooltip oraz title z tekstem, który chcemy zawrzeć w “dymku”.
W jakim przypadku może przydać nam się tooltip? A np. przy ukrywaniu porady, podpowiedzi do danego tekstu lub zwykłej informacji. Spójrz na poniższy przykład z zastosowaniem nowo poznanego komponentu:
Wyświetlanie tooltipa
Powyżej pokazałem jak dodać tooltipa. Teraz zobaczysz jak zastosować dostępne opcje dla tego komponentu. Bootstrap oferuje atrybuty, które dają nam możliwość manipulowania tooltipami.
Pierwszą modyfikacją którą możemy wdrożyć jest pozycja wyświetlania naszego “dymka”. Domyślnie jest w pozycji “top”. Standardowo do wyboru mamy cztery pozycje: top, bottom, left i right.
Następną opcją jest ustawienie animację bądź jej wyłączenie. Domyślnie jest ona włączona. Aby wyłączyć należy użyć atrybutu data-animation i ustawić wartość na false.
Ciekawą opcją jest także manipulowanie opóźnieniem wyświetlania i zanikania tooltipa. Do tego posłuży nam atrybut data-delay. Wartością jest czas podawany w milisekundach.
Spójrz na nasz przykład w którym zastosowałem dodatkowe opcję dla tooltipa:
To by było na tyle w temacie tooltipów. Myślę że najważniejsze informację o komponencie przekazałem w powyższym materiale. Jak zwykle kieruje do oficjalnej dokumentacji Bootstrapa, aby rozwiać wszystkie wątpliwości.
W kolejnym materiale opowiem o popoverach – rozbudowanych okienkach wyświetlanych po kliknięciu w dany element.
Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb.
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA