Tworzymy tooltip wykorzystując tylko i wyłącznie CSS3 i HTML5


17 maja 2012 / Michał Kortas


Tooltip jest często wykorzystywanym elementem na stronach internetowych, który pomaga użytkownikom zorientować się gdzie, co i jak. Niestety standardowe „chmurki„, wbudowane w przeglądarki, bardziej straszą niż się podobają, dlatego zajmiemy się wykonaniem swojej własnej wersji tego rozwiązania. W czasach, kiedy nowe technologie coraz bardziej zadomawiają się w przeglądarkach możemy pokusić się o nie wykorzystywanie silnika jQuery, opierając swoje działania tylko i wyłącznie na CSS3 i HTML5. Niestety wiąże się to z brakiem wsparcia przez starsze przeglądarki, dlatego w ostatnim akapicie przedstawię Wam wersję alternatywną dla naszego tooltip’a.

Tooltip z wykorzystaniem własności HTML5

Pierwszy przykład wykorzystuje pseudo-element ::before (lub ::after), a dane wczytywane do tooltip’a przechowuje w stworzonym przez nas atrybucie „tresc„. Odwołać się do nich możemy za pomocą własności „content„. Tak jak wspomniałem wcześniej, należy pamiętać, że korzystając z tego rozwiązania, zostanie ono pominięte przez starsze wersje przeglądarek (głównie IE).

Aby zastosować tooltip na witrynie, wstawmy odpowiedni kod HTML5 do jej treści.

Atrybut „tresc” jest przekaźnikiem danych. Za chwilę odbierzemy je w naszym kodzie CSS3.

Demo wykonanych czynności prezentuję pod linkiem podanym poniżej.

Sprawdź działanie > Tooltip z wykorzystaniem własności HTML5

Z biegiem czasu, kiedy twórcy przeglądarek zaimplementują większość funkcji HTML5, rozwiązania tego będzie można spokojnie używać w swoich projektach.

Tootlip alternatywny, bez udziału HTML5

Obiecałem też opracować wersję alternatywną. Niestety zostajemy w niej pozbawieni możliwości przechowywania danych we własnych atrybutach.
Oto kod, który należy wstawić do treści witryny.

Teraz pozostaje nam sformatować chmurkę w CSS3.

Tak jak poprzednio, pod linkiem poniżej znajduje się DEMO przykładu.

Sprawdź działanie > Tooltip alternatywny, bez udziału HMTL5

To już wszystkie prezentowane dzisiaj czynności. Mam nadzieję, że bez problemu poradzicie sobie z wdrażaniem przykładu na własnych witrynach internetowych.
W razie niejasności, pytań i kłopotów proszę zostawiać komentarze tylko i wyłącznie poniżej tego wpisu.



5 odpowiedzi na “Tworzymy tooltip wykorzystując tylko i wyłącznie CSS3 i HTML5”

  1. Nie chcę jakoś nadmiernie zrzędzić, ale w demie kodowanie jest „uwalone” w dodatku tego textu z użyciem tooltipa przydałoby się więcej, gdyż ciężko widoczny jest ten fragment, gdzie dymek występuje, a wzrok raczej mam dobry.. ;)

  2. Adam pisze:

    Świetny opis i bardzo pomocny! Mam jednak do Ciebie pytanie dotyczące automatycznego zawijania długiego opisu w „chmurce”. W jaki sposób można zmodyfikować ten skrypt? W tym momencie jeśli napiszę w atrybucie „tresc” np. 10 wyrazów to przy mniejszych rozdzielczościach ekranu końcówka tego opisu chowa się i jej nie widać:(
    Pozdrawiam serdecznie

    PS
    Czy wiecie może dlaczego podczas edycji HTML5 i tego skryptu w Aptanie program podkreśla cały link jako niezgodny ze specyfikacją?

  3. Grzegorz (Qmasz) pisze:

    Dzięki wielkie, czegoś takiego potrzebowałem.
    Opis czytelny oraz wszytko jasne od razu nawet dla amatora.
    Pozdrawiam

  4. Pod chrome na pewno nie działa niestety. Sam do tego siadłem i właśnie próbuję to rozpracować. Jak się uda to dam na swoją stronę i na bloga http://netteria.blogspot.com a co, trzeba się dzielić:) Myślę jednak, że bez js to może być trudne aby wszędzie działało tak samo.

Dodaj komentarz

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