CSS Tooltips, žiadny javascript ani DHTML

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

Alternatívne verzie: Text PDF Voice
Autor: PaBi3 · Kategória: Webdesign · Dátum: 26.09.2006 21:15

Komentáre

#1 Tomask Web E-mail
26.09.2006 22:37
No, ked budeme uvazovat, tak po funkcnej stranke je ten javascript lepsi - teda hlavne kompatibilnejsi.
a ked tu mame daco ako cotojatka tak niet o com diskutovat ;)
tolko moj nazor, a s tou mozillou mas uplne pravdu

#2 JPAS. Web E-mail
26.09.2006 23:05
No mně se to zdá jako sémantická prasárna :-) Jinak je to zajímavé řešení, nicméně si myslím, že JavaScript je tu právě od těhle těch vylepšení.

#3 admin Web E-mail
26.09.2006 23:11
admin Prečo by som mal namiesto CSS použiť javascript, ktorý je omnoho zložitejší ako 4 riadky v CSS?

#4 dusoft Web E-mail
26.09.2006 23:20
A naco by som mal pouzivat takuto nahradu za standardny title? Semanticke to zrovna nie je, aj ked pekne to je.

#5 dusoft
26.09.2006 23:21
A este tam je mensi problem pri zvacseni textu - tooltip nie je viditelny, asi sa zobrazuje mimo obrazovky.

#6 Tomask Web
27.09.2006 00:34
najskor preto, ze ten js funguje prakticky v kazdom browseri okrem IE4 a imho je jednoduchsie napisat na zaciatok html dokumentu implementaciu JS cootjatka, ktory je uz hotovy a je myslim pod GNU/GPL ako pisat 5 riadkov CSS ;)
ape prvorade je to o tej kompatibilite ....

#7 admin Web E-mail
27.09.2006 07:14
admin [5] To písmo by si si musel zväčšiť tak, aby si mal dva riadky na obrazovke. To nespraví takmer nitko.

[6] Taký JS ale zaberá omnoho viac kB ako riešene s CSS. Čo sa týka kompatibility, tak by to malo teoreticky fungovať od Internet Explorer 5. Takéto riešenie funguje aj ľudom, ktorí majú vypnutý javascript. Tí čo majú vypnuté štýly to budú vidieť tiež (dá sa to upraviť ešte trochu lepšie pre tento prípad).

#8 dusoft
27.09.2006 14:18
[7] Myslis?

To sa teda mylis. Staci mat nastavenu minimalnu velkost pisma v prehliadaci.

#9 admin Web E-mail
28.09.2006 06:55
admin [8] Ja som hovoril o veľkom a nie o malom písme.

#10 hresko Web E-mail
25.10.2006 11:56
Pekne. Nikdy pred tym som si nic podobne nevsimol.

#11 p360t Web E-mail
12.11.2006 21:49
Nuž, vo firefoxe2 som si všimol, že tá stránka má horizontálny scrollbar, aby vymedzila miesto pre ten "odkazový" tooltip. napr. opera (9.02) to nerobí, ale v nej sa nezobrazí pravá polovica tooltipu. takže až také ideálne to asi nebude[wink]

Osobné údaje
Captcha
Odpíšte text z obrázku. Rozlišujú sa malé a veľké písmená.
Obsah
Možnosti