Tooltips – eleganckie title do elementów
| kategoria: CSS, HTML i XHTML, JavaScript | Komentarze (0)
Niekiedy chcemy w naszych projektach urozmaicić wygląd naszego domyślnego atrybutu title i stworzyć eleganckie tzw. tooltip-y. W internecie jest już sporo różnych rozwiązań na ten temat. Na pewno nie zaszkodzi podać i własne rozwiązanie, pozwalające na ulepszenie atrybutu title. Takie "bezobsługowe" tooltip-y.
Podstawowe cechy to:
- Jeśli masz wyłączony JavaScript, to dostępny jest domyślny atrybut
title. - Rozdzielenie kodu JavaScript i CSS.
- Możliwość dowolnej kombinacji stylów dla naszego tooltip-a.
- Bezobsługowe działanie, czyli poza samym
title="test", nic nie trzeba robić.
W załączonym przykładzie są trzy pliki:
- utitle.html - przykładowy kod html
- utitle.css - arkusz stylów CSS i przykład ostylowania naszego tooltip-a
- utitle.js - kod JavaScript, który usuwa wszystkie atrybuty
titlei zamienia je na atrybutytip.
CSS
W arkuszu stylów należy pamiętać, aby element stylowany miał strukturę zaczynającą się od #toolTip i posiadał minimalny kod:
display: none;position: absolute;
JavaScript
Praktycznie rzecz biorąc, to wystarczy uruchomić plik utitle.js, który automatycznie wszystko za nas zrobi. Rzecz jasna, każdy może sobie kod dowolnie modyfikować i dostosowywać do własnych potrzeb.
Opcje
W naszym title możemy użyć pogrubiania tekstu i łamania linii. Aby pogrubić tekst należy fragment oznaczyć gwiazdką. Przykład: To jest *pogrubiony* tekst.
Aby tekst złamać w danym momencie, to należy użyć podwójnego hash-a ##. Przykład: tekst może być ##złamany tutaj.
Dlaczego taki sposób? Ponieważ w samym atrybucie title nie możemy mieszać html-a z tekstem. Stąd trzeba użyć innych znaczników, aby zamienić je potem na odpowiedni kod html. Takie rozwiązanie jest stosowane w wielu miejscach, np. bbcode.
Przykład
Przykład, który pokazuje działanie opisanego rozwiązania. 
Licencja i wykorzystanie
Rozwiązanie uTitle jest bezpłatne i na licencji MIT oraz GPL. Przy czym miło będzie pozostawić link do nas w kodzie JavaScript.
Sugestie i uwagi
Czy można to zrobić lepiej? Tak. Podane rozwiązanie wcale nie jest idealne i pewnie można to zrobić na wiele innych sposobów. Niemniej jednak zachęcam do komentowania i zgłaszania sugestii.
Warto zajrzeć jeszcze
(Nie ma jeszcze głosów, ale możesz być pierwszy)Komentarze
Możesz zostawić komentarz lub wysłać sygnał trackback ze swojej strony.
Zanim dodasz komentarz, to zapoznaj się z zasadami dotyczącymi komentarzy.