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:
Hlavné nedostatky&chyby:
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: