CSS Tooltips, žiadny javascript ani DHTML

Javascript je známy tým, že zaberá zbytočne veľa miesta, pokiaľ chcete vytvoriť nejaký "pekný efekt". Tooltipy medzi tie efekty patria. Pre dosiahnutie tooltipu v javascripte stačí zapísať milióny riadkov kódu, avšak existuje tu aj CSS, tak prečo by sme sa museli takto trápiť.

Takže ako začneme? Najprv si vytvoríme nasledovný XHTML kód.

<span class='tooltip'>
<img src='info.gif' alt='Lorem ipsum' />
<div>
<strong>Lorem ipsum dolor</strong>
<p>
Lorem ipsum dolor sit amet consectetuer tincidunt sollicitudin eleifend eu est. Netus Praesent quis lacus urna Nullam hac arcu urna pulvinar augue.
</p>
</div>
</span>

V prvom rade si treba premyslieť ako to bude fungovať. To som už urobil za vás, takže vysvetlenie: Po prejdení myši nad <span> by sa mi mal zobraziť tooltip. Dosiahnem to umiestnením <div> a <img> do <span>. To druhé umiestnenie <img> môže byť kľudne aj text alebo odkaz. Nemôže byť však prázdne, pretože by som v podstate nemohol prejsť myšou nad <div>. Kým sa nedostanem myšou nad <span>, tak bude <div> ukrytý. Naopak, keď sa naň dostanem, tak musím ten <div> ihneď zobraziť. Toto všetko dosiahnem za pomoci pozicovania relative a absolute. Nasledovný CSS kód je upravený špeciálne aj pre vlajkovú ľoď Microsoftu - Microsoft Internet Expolrer. Táto úprava bola vykonaná za pomoci hover.htc.

span.tooltip { behavior:url('hover.htc'); cursor:help; position:relative; margin:0 4px 0 4px; }
span.tooltip div { behavior:url('hover.htc'); text-align:justify; visibility:hidden; min-width:250px; _width:250px; font-weight:normal; padding:15px; border:1px solid #cccccc; -moz-border-radius:12px; background:#ffffcc; position:absolute; top:1.35em; left:1.6em; }
span.tooltip strong { display:block; margin:5px 0 0 0; }
span.tooltip strong:first-child { margin:0; }
span.tooltip:hover div, span.tooltip.hover div { visibility:visible; z-index:10; }
span.tooltip div:hover, span.tooltip div.hover { visibility:hidden; }

Pokiaľ chcete vypustiť podporu pre MSIE, musíte odstrániť z CSS kódu všetky selektory, ktoré majú vlastnosť behavior a _width a vymazať aj selektory umiestnené za čiarkou. Dopredu upozorním, že tooltip vyzerá najlepšie vo Firefoxe, pretože ten podporuje najlepšiu vec v celom CSS -moz-border-radius.

Hlavné výhody:

• žiadny obťažujúco dlhý javascript (pokiaľ neuvažujeme o hover.htc)
• použitie XHTML kódu v tooltipe
• rýchlosť, jednoduchosť

Hlavné nedostatky&chyby:

• chybné vykreslovanie v Opere
• odkazy v MSIE prekrývajú tooltip

Možno prídete na to ako vyriešiť nevýhody a pridať výhody. Kompletný príklad si môžete prezrieť tu. Pokiaľ by ste mali záujem vyriešiť chybu vo vykreslovaní v Opere, použite definíciu float v selektore span.tooltip (možno vo vašom prípade bude potreba vytvoriť aj nový element s vlastnosťou clear). Nie je to najlepšie riešenie ale bude to fungovať správne.

CSS Tooltips som testoval v prehliadačoch:

• Opera 9.00
• Opera 9.02
• Mozilla Firefox Beta 2.0b2
• Microsoft Internet Explorer 6