Tooltip w CSS

Użyłem elementu <dfn/>, ponieważ zwykły <span/> nic nie mówi o znaczeniu tego tekstu. Także po wyłączeniu CSS niektóre przeglądarki pokażą tekst w elemencie dfn czcionką pochyłą.

Możemy się domyślić co należy zrobić. Standardowo ukryć element <dfn/> przez display: none. I dodać regułę .tooltip:hover dfn ustawiającą <dfn/> jako display: block; Możemy zawsze poprawić wygląd etykietki i ją spozycjonować, żeby swobodnie pływała sobie nad dokumentem.

Natomiast ten sposób nie działa w IE. Dla niego postanowiłem wykonać operacje na drzewie DOM przy użyciu JavaScript. Dodałem do CSS-a po przecinku kolejny selektor:

1. .tooltip:hover dfn, .tooltiph dfn

Będę chciał zmienić klasę linka nakierowanego myszą po zdarzeniu mouseover. Można oczywiście dodać od razu w HTML-u takie atrybuty do linków, ale jest to bardzo niewygodne i niezalecane. Tak jak CSS służy do opisywania wyglądu, tak JavaScript zachowania i powinny być to w 99% przypadków oddzielne pliki.

Wykorzystam znowu magiczny komentarz warunkowy dla IE:

1. <!--[if lt IE 7]>
2. <script src="ietooltips.js" type="text/javascript"></script>
3. <![endif]-->

Dodam w ten sposób do dokumentu odnośnik do mojego skryptu dla Internet Explorera, nie mieszając nic w przeglądarkach bardziej zgodnych ze standardami.

Co należy zrobić? Pobrać wszystkie linki o klasie tooltip do tablicy, przelecieć po niej pętlą i dodać obsługę zdarzeń myszy. Można skorzystać z getElementsByTagName('a') i sprawdzać czy className nie równa się tooltip, ale ja wolałem użyć gotowej funkcji pobierającej od razu wszystkie elementy o klasie tooltip. Dlaczego? Zawsze istnieje możliwość, że będziemy chcieli zastosować etykietkę także dla zwyczajnego tekstu i po prostu dodamy strukturę, nie musząc walczyć znowu z zachowaniem.

1. document.getElementsByClassName = function(className) {
2. var children = document.getElementsByTagName('*') || document.all;
3. var elements = new Array();
4. for (var i = 0; i < children.length; i++) {
5. var child = children[i];
6. var classNames = child.className.split(' ');
7. for (var j = 0; j < classNames.length; j++) {
8. if (classNames[j] == className) {
9. elements.push(child);
10. break;
11. }
12. }
13. }
14. return elements;
15. }

Funkcja opisywania zdarzeń wygląda tak:

1. function ieTooltips() {
2. var tiplinks = document.getElementsByClassName('tooltip');
3. for (var i = 0; i < tiplinks.length; i++) {
4. tiplinks[i].onmouseover = function() { this.className += ' tooltiph' }
5. tiplinks[i].onmouseout = function() { this.className = 'tooltip'; }
6. }
7. }

Pierwsza linijka to pobranie do tablicy wszystkich elementów o klasie tooltip. Następnie w pętli dodajemy zdarzenie onmouseover i onmouseout, korzystając z funkcji lokalnej i obiektu this, odnoszącego się do aktualnego elementu (linka). Po mouseover dopisujemy klasę tooltiph, po mouseout resetujemy nazwę klasy.

Na koniec wypada wykonać zgrabnie funkcję po załadowaniu dokumentu. Aby kod był na wysokim poziomie, skorzystajmy z funkcji dodawania zdarzeń do dokumentu:

1. function addEvent(obj, evType, fn) {
2. if (obj.attachEvent) {
3. var r = obj.attachEvent("on" + evType, fn);
4. return r;
5. }
6. else {
7. return false;
8. }
9. }

Zrezygnowałem ze sprawdzania, czy agent użytkownika obsługuje addEventListener, bo kod jest pisany tylko pod Internet Explorera 6 i niższe. No ale korzystamy z tej funkcji, aby zakończyć plik:

1. addEvent(window, "load", ieTooltips);

I już. Strona z przykładem działania.

O wiele lepszy sposób na uporanie się z problemem nie działania standardowego tooltipa w IE rozpisał Wassago.