Inne

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

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.

<a href="http://webroad.pl" title="Kliknij, aby przejść na WEBroad.pl">Przykładowy odnośnik</a>

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.

<script>
  jQuery(function ($) {
    $("selektor").tooltip(opcje)
  });
</script>

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.

<script>
  jQuery(function ($) {
    $("a").tooltip()
  });
</script>

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:

<script>
  jQuery(function ($) {
    $("a").tooltip(
      {
      placement : 'bottom',
      trigger : 'click'
      }
    )
  });
</script>

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.

<a href="http://webroad.pl" title="Kliknij, aby przejść na WEBroad.pl" data-placement="bottom" data-trigger="click">Przykładowy odnośnik</a>

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.

komentarzy 5

  • Awatar
    PenGraph

    24 września 2013 21:16

    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ą.

    Odpowiedz
    • Awatar
      Michał Kortas

      24 września 2013 21:21

      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 :)

      Odpowiedz
    • Awatar
      Tomasz Piątek

      24 września 2013 21:56

      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 :)

      Odpowiedz
      • Awatar
        PenGraph

        24 września 2013 22:18

        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.

        Odpowiedz
  • Awatar
    Damian

    3 grudnia 2013 13:17

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

    Odpowiedz

Zostaw odpowiedź