Podpowiedzi do linków / Tooltips

autor: Robert

16 października 2014

Nieraz spotykamy się z sytuacją gdy w tekście zamieszczamy linki ale użytkownikowi nie do końca mówią one do czego służą. Fajnym rozwiązaniem jest wyświetlenie małego dymka, który podpowie co dokładnie kryje się pod odnośnikiem aby osoba przeglądająca naszą stronę dokładnie wiedziała w co klika.

Aby wyświetlić owe dymki musimy, prócz dopisania klasy do elementu, użyć także kilka linijek JSa. Nie będę opisywał wszystkich możliwych parametrów, które można przekazać do dymka gdyż osoby mniej biegłe mogą się w tym pogubić. Osoby bardziej biegłe bez problemu skorzystają z nich po przeczytaniu oficjalnej dokumentacji.

Podstawowy przykład

W podstawowym przykładzie pokażę jak dodać dymki do zwykłych linków za pomocą data-atrybut. Tym sposobem możemy indywidualnie modyfikować wszystkie elementy posiadające tą samą klasę.

Pierwszą rzeczą, którą musimy wiedzieć są odpowiednie parametry w samym kodzie HTML naszego linka. Są to:

• href="http://example.com", standardowy kod odnośnika do strony
• data-placement="pozycja", gdzie „pozycja” może przyjmować wartości: top, right, bottom, left
• data-toggle="tooltip", tutaj kod nie ulega zmianie, mówi on, że link będzie dymkiem.
• class="tooltip", jest to nazwa klasy, którą użyjemy w kodzie JS do wywołania naszego dymka (wszystkie elementy mają tą samą klasę a dymki będą się wyświetlały w różnych pozycjach.
• data-original-title="Tekst", gdzie Tekst to wyrazy, które chcemy umieścić w dymku

Poniżej kod po kolei linków z podpowiedziami: u góry, z prawej, z dołu, z lewej

Kolejnym elementem, który musimy wykonać jest umieszczenie kodu JS na naszej stronie internetowej. Można to wykonać na 2 sposoby, albo wewnątrz dokumentu albo zaimportować plik *.js z serwera. Więcej informacji o zamieszczaniu skryptów JS znajduje się TUTAJ

W kodzie JS mamy następujące elementy:

• $(document).ready(function(){ kod });, odpowiada za uruchomienie naszego kodu dopiero po wczytaniu całej strony WWW. (JQuery operuje na elementach naszej strony, jeśli nie wszystkie się wczytają zanim uruchomi się skrypt, nie będzie on działał prawidłowo)
• $(".tooltip"), jest to odwołanie się do naszej klasy
• tooltip();, jest to metoda odpowiadająca za dymek do której są przekazywane parametry z data-atrybut

Przykłady

Podpowiedź u góry
Podpowiedź z prawej
Podpowiedź od spodu
Podpowiedź po lewej

Przykład z użyciem parametrów w JS

Pierwszą rzeczą, którą musimy wiedzieć są odpowiednie parametry w samym kodzie HTML naszego linka. Są to:

• href="http://example.com", standardowy kod odnośnika do strony
• data-toggle="tooltip", tutaj kod nie ulega zmianie, mówi on, że link będzie dymkiem.
• class="nazwa-klasy", jest to nazwa klasy, którą użyjemy w kodzie JS do wywołania naszego dymka. (indywidualna klasa dla indywidualnego kierunku dymka)
• data-original-title="Tekst", gdzie Tekst to wyrazy, które chcemy umieścić w dymku

Kolejnym elementem, który musimy wykonać jest umieszczenie kodu JS na naszej stronie internetowej.

W kodzie JS mamy następujące elementy:

• $(document).ready(function(){ kod });, odpowiada za uruchomienie naszego kodu dopiero po wczytaniu całej strony WWW. (JQuery operuje na elementach naszej strony, jeśli nie wszystkie się wczytają zanim uruchomi się skrypt, nie będzie on działał prawidłowo)
• $(".tip-top"), jest to odwołanie się do naszej klasy (w tym przypadku do klasy odpowiadającej za wyświetlanie dymka u góry)
• tooltip({ parametry });, jest to metoda odpowiadająca za dymek do której przekazujemy odpowiednie parametry
• placement : 'top', jest to parametr przekazywany do metody, który powoduje wyświetlenie dymka u góry

Powyższe metody różnią się tym, że w pierwszej każdy element musi mieć podany atrybut data-placement i może on wskazywać inny kierunek ale wszystkie elementy mogą mieć taką samą klasę.

W drugim przykładzie kod dotyczy elementów, które posiadają jedną i zdefiniowaną w kodzie JS klasę i nie zadziałają na pozostałe, więc wszystkie elementy tej samej klasy będą miały dymki z tej samej strony. Dodatkowo nie mają zdefiniowanego parametru data-placement

Podpowiedzi do buttonów

Prócz zwykłych linków, dymki możemy zastosować także do przycisków. Zasada tutaj jest identyczna i możemy korzystać zarówno z data-placement jak i z ustalania pozycji w kodzie JS.

Oraz kod JS

Dymek z lewej

Dymek z góry

Dymek od spodu

Dymek z prawej

---

Post się przydał? Oceń go proszę.

(6 głosów, średnia: 5,00 na 5)

Loading...

---

← Starszy post
Akordeon / Collapse
Nowszy post →
Okienka z podpowiedziami / Popover

Robert 10 grudnia 2014 o 09:10

A próbowałeś do kodu przycisku dodać i uruchamianie podpowiedzi i uruchamianie okienka modalnego na raz?
Komentarze poprawione:)

Odpowiedz

Mister Klikacz 10 grudnia 2014 o 16:43

Tak, próbowałem. Do przycisku, który wcześniej tylko wyświetlał okienko dopisałem kod podpowiedzi i teraz działa tylko podpowiedź :P Po kliknięciu nic się nie dzieje.
Jak w ogóle wpisać 2 różne wartości do atrybutu data-toggle? Próbowałem oddzielić je spacją, później też przecinkiem, zmieniłem kolejność, ale efekt taki sam – działa tylko podpowiedź. Proszę o jakąś wskazówkę :P

Odpowiedz

Robert 10 grudnia 2014 o 16:55

Tak na szybko przychodzi mi na myśl coś takiego by w buttonie odwoływać się do modala poprzez data-toggle a podpowiedź uruchomić JSem poprzez $('#example').tooltip('top'). Brak czasu:/ ale jak to nie zadziała to przysiądę nad tym w wolnej chwili:)

Odpowiedz

Mister Klikacz 11 grudnia 2014 o 18:35

Zadziałało, dziękuję :)

Robert 13 października 2015 o 08:37

Oczywiście, że można:) Tutaj masz przykład: http://jsfiddle.net/technotarek/2htze/

Odpowiedz