HTML5 & CSS3

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

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.

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

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.

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

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.

komentarzy 5

  • Awatar
    Robert Dłubak

    17 maja 2012 19:12

    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.. ;)

    Odpowiedz
  • Awatar
    Adam

    31 sierpnia 2013 11:26

    Ś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ą?

    Odpowiedz
  • Awatar
    Grzegorz (Qmasz)

    11 września 2015 12:53

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

    Odpowiedz
  • Awatar
    Sławomir Własik

    7 października 2016 22:28

    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.

    Odpowiedz

Zostaw odpowiedź