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.
1 | <a href="#" class="tool" tresc="Ten tekst wyświetli się w chmurce!">NAJEDŹ NA TO MIEJSCE</a> |
Atrybut „tresc” jest przekaźnikiem danych. Za chwilę odbierzemy je w naszym kodzie CSS3.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | a.tool { position: relative; } a.tool::before { content: attr(tresc); /*Odbieranie danych z atrybutu 'tresc'*/ font-size: 14px; position: absolute; z-index: 999; white-space: nowrap; bottom: 9999px; left: 50%; background: gray; color: #fff; padding: 4px 5px; opacity: 0; -webkit-border-radius: 3px; -o-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } a.tool:hover::before { opacity: 1; bottom: -25px; } |
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.
1 | <a href="#" class="tooltip">NAJEDŹ NA TO MIEJSCE<span>Ten tekst wyświetli się w chmurce!</span></a> |
Teraz pozostaje nam sformatować chmurkę w CSS3.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | a.tooltip { position: relative; } a.tooltip span { font-size: 14px; position: absolute; z-index: 999; white-space: nowrap; bottom: 9999px; left: 50%; background: gray; color: #fff; padding: 4px 5px; opacity: 0; border-radius: 3px; } a.tooltip:hover span { opacity: 1; bottom:-25px; } |
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.
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.. ;)
Wszystko poprawiłem, włącznie z kodem :) Pozdrawiam!
Ś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ą?
Dzięki wielkie, czegoś takiego potrzebowałem.
Opis czytelny oraz wszytko jasne od razu nawet dla amatora.
Pozdrawiam
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.