Kurs Twitter Bootstrap – #3 korzystanie z Tolltip’ów


24 września 2013 / Michał Kortas


Już bardzo długo nie napisałem nic na temat Bootstrapa. W między czasie pojawiła się kolejna wersja tego frameworka i niestety naprawdę wiele od strony technicznej uległo zmianie. Na szczęście poprzednie dwa wpisy odnosiły się stricte do samej teorii, a kolejne poradniki chciałbym tworzyć jednak na zasadzie bardziej praktycznej niż dotychczas, dlatego nie zbyt wiele straciliśmy. W dzisiejszym wpisie omówię korzystanie z funkcjonalności Tooltip‚ów, co wbrew pozorom jest bardzo, ale to bardzo proste. Zapraszam do lektury.

Tooltipy nie przeszły rewolucji podczas tworzenia nowego, odświeżonego wydania Bootstrapa, dlatego poniżej przedstawione wskazówki możemy śmiało stosować, korzystając z wersji 2.3.2 oraz 3. Przejdźmy zatem do konkretów.

Wprowadzenie

Na samym początku załóżmy, ze Tooltip będzie wyświetlał się tylko przy wszystkich odsyłaczach na witrynie.

Zawartość tooltip’a domyślnie pobierana jest z atrybutu title. Aby jednak funkcjonalność ta mogła zadziałać, potrzebujemy jeszcze bardzo niewielkiego skryptu oraz dołączenia pliku „bootstrap-tooltip.js” (pomijam już dołączenie samej biblioteki jQuery, co jest oczywiste). Wspomniany wcześniej skrypt będzie wyglądał następująco.

Selektorem jest oczywiście element, jaki ma współpracować z tooltipem, natomiast „opcje” to parametry, które będziemy stosować do zmiany domyślnych ustawień (są na to dwa sposoby, ale przejdziemy do tego za moment).

Założyliśmy, że chcemy, aby tooltip posiadały wszystkie odnośniki, tak więc już konkretny skrypt będzie wyglądał następująco.

A oto efekt.

Tooltip Bootstrap

Zmiana domyślnych ustawień

Jak przed chwilą wspomniałem, domyślne ustawienia tooltipów możemy edytować na dwa niezależne sposoby. Pierwszym z nich jest korzystanie z JavaScript (chodzi mi dokładnie o „opcje” w przedstawionym powyżej skrypcie), a drugim – korzystanie z atrybutów w kodzie HTML5. Możliwe parametry zawarte są w tabelce w dokumentacji Twitter Bootstrap#Tooltips, więc nie będę jej przepisywał. Zachęcam Was do zapoznania się z nią.

Edycja ustawień za pomocą JavaScript

Spróbójmy zatem zmienić kilka domyślnych ustawień. Przyjmijmy, że „chmurka” z opisem pojawiać ma się zawsze u dołu odnośnika i nie po zwykłym najechaniu, a dopiero po kliknięciu w niego (druga opcja nie ma sensu w przypadku odnośników, bo zaraz po kliknięciu zostaniemy przeniesieni do innej lokalizacji – chodzi mi jednak o samą możliwość zamiany ustawień za pomocą parametrów). Dla takich założeń nasz skrypt będzie wyglądał w taki sposób:

Uzyskaliśmy następujący tooltip.

Edycja ustawień za pomocą atrybutów

Ta możliwość jest prostsza, ale wymaga od nas oznaczania każdego elementu stosownymi atrybutami. Przygotujemy teraz taki sam tooltip jak wyżej, nie zmieniając jednak ustawień za pomocą JavaScript. Jak budować atrybuty? Korzystamy z przedrostku data-, czyli na przykład data-trigger="click" dodany do odnośnika spowoduje, że tooltip pokaże się nam dopiero po kliknięciu.

Spójrzmy na nasz przykład.

Efekt uzuskaliśmy identyczny jak z poprzednim.

Tooltip Bootstrap

Podsumowanie

Możemy korzystać nie tylko z tooltipów przy zwykłych odnośnikach. W każdej chwili uruchomimy je dla obrazków, nagłówków etc. Możemy też korzystać z większości (jeśli nie wszystkich) dostępnych selektorów, znanych z języka CSS3.



5 odpowiedzi na “Kurs Twitter Bootstrap – #3 korzystanie z Tolltip’ów”

  1. PenGraph pisze:

    Dzięki za artykuł! :) Sam kiedyś cię przymierzałem do „spolszczenia” dokumentacji bootstrapa. Tylko zastanawiam się po co, skoro podane tam przykłady są banalne i wszystko po prostu widać. Chyba że są to elementy javascript, ale je też po chwili prób i błędów da się zrozumieć. Choć przyznam się, że na początku jak zaczynałem bawić się tym frameworkiem to musiałem korzystać z blogów i filmów żeby to wszystko ogarnąć ;) Dzisiaj robię strony na nim i twierdzę, że jest to niezły framework, choć trzeba się pilnować z responsywnością.

    • Właśnie jedynie JavaScript może być trochę kłopotliwy. Resztę spokojnie można odczytać, bez nawet znajomości angielskiego, w zupełnie intuicyjny sposób. Dzięki za komentarz :)

    • Tomasz Piątek pisze:

      Nie do końca przykłady z JS są łatwe :) Nie mam zielonego pojęcia o JS i trudno mi przez nie przebrnąć, ale powoli zaczynam łapać.
      Pierwszy raz opieram na framworku strony i to jest cudowne :)

      • PenGraph pisze:

        Faktycznie, na początku też miałem problem z js, ale spokojnie – trening czyni mistrza (choć do mistrza mi daleko) :) Na razie jestem w trakcie robienia trzeciej strony na bootstrapie. I wiem, że naprawdę warto wgryźć się w js i boostrap.css.

  2. Damian pisze:

    Kiedy będą kolejne części kursu ??

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *