The article CSS Tooltips, ziadny javascript ani DHTML is written by PaBi3
Javascript je znamy tym, ze zabera zbytocne vela miesta, pokial chcete vytvorit nejaky "pekny efekt". Tooltipy medzi tie efekty patria. Pre dosiahnutie tooltipu v javascripte staci zapisat miliony riadkov kodu, avsak existuje tu aj CSS, tak preco by sme sa museli takto trapit.
Takze ako zacneme? Najprv si vytvorime nasledovny XHTML kod. <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 premysliet ako to bude fungovat. To som uz urobil za vas, takze vysvetlenie: Po prejdeni mysi nad <span> by sa mi mal zobrazit tooltip. Dosiahnem to umiestnenim <div> a <img> do <span>. To druhe umiestnenie <img> moze byt kludne aj text alebo odkaz. Nemoze byt vsak prazdne, pretoze by som v podstate nemohol prejst mysou nad <div>. Kym sa nedostanem mysou nad <span>, tak bude <div> ukryty. Naopak, ked sa nan dostanem, tak musim ten <div> ihned zobrazit. Toto vsetko dosiahnem za pomoci pozicovania relative a absolute. Nasledovny CSS kod je upraveny specialne aj pre vlajkovu lod Microsoftu - Microsoft Internet Expolrer. Tato uprava bola vykonana 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; } Pokial chcete vypustit podporu pre MSIE, musite odstranit z CSS kodu vsetky selektory, ktore maju vlastnost behavior a _width a vymazat aj selektory umiestnene za ciarkou. Dopredu upozornim, ze tooltip vyzera najlepsie vo Firefoxe, pretoze ten podporuje najlepsiu vec v celom CSS -moz-border-radius. Hlavne vyhody: ziadny obtazujuco dlhy javascript (pokial neuvazujeme o hover.htc) pouzitie XHTML kodu v tooltipe rychlost, jednoduchost Hlavne nedostatky&chyby: chybne vykreslovanie v Opere odkazy v MSIE prekryvaju tooltip Mozno pridete na to ako vyriesit nevyhody a pridat vyhody. Kompletny priklad si mozete prezriet tu. Pokial by ste mali zaujem vyriesit chybu vo vykreslovani v Opere, pouzite definiciu float v selektore span.tooltip (mozno vo vasom pripade bude potreba vytvorit aj novy element s vlastnostou clear). Nie je to najlepsie riesenie ale bude to fungovat spravne. CSS Tooltips som testoval v prehliadacoch: Opera 9.00 Opera 9.02 Mozilla Firefox Beta 2.0b2 Microsoft Internet Explorer 6
CSS Tooltips, žiadny javascript ani DHTML Návrat

CSS Tooltips, žiadny javascript ani DHTML