Wz tooltip – informačný tooltip

Pridať komentár

Wz tooltip – informačný tooltip

Každý browser má v sebe implementovanú základnú funkciu na zobrazovanie „tooltipov“ – kontextových informácií zobrazujúcich sa po dlhšom podržaní kurzrou napríklad nad linkou. V tooltipe sa zobrazí obsah HTML atribútu titile na danom tagu. Nad touto funkčnosťou však nemáme žiadnu kontrolu. Pokiaľ chceme napríklad urýchliť zobrazenie tooltipu, či zmeniť grafickú podobu, neostáva nič iné len siahnuť po nejakom externom javascripte.
Mne sa veľmi sa osvedčil WZ_Tooltip, ktoré implementácia, použitie a možnosti sú naozaj na vysokej úrovni.

Skript sa skladá z troch externých súborov, priamo do stránky stačí vložiť ten hlavný:

<script type="text/javascript" src="wz_tooltip.js"></script>

Upozorňujem, že skript musí byť vložený až ZA tagom body, čiže v tele stránky. Samotné použitie skriptu je potom založené na používaní HTML atribútov onmouseover a onmouseout na ľubovoľnom HTML tagu.

<a onmouseover="Tip('Text tooltipu')" onmouseout="UnTip();" href="#">PHPBlog.sk</a>

V najnovšej verzii WZ_Tooltip pribudlo používanie atribútu onmouseout, čo doposiaľ nebolo nutné. Tooltip zmizol po „odídení“ kurzorom z objektu. Táto funkčnosť však bola niekedy nesprávne interpretovaná v mnohých browseroch, a nefungovalo to vždy korektne, preto autori zrejme pristúpili k používaniu funkcie UnTip() na atribúte onmouseout.

Konfigurácia

Priamo v JS súbore wz_tooltip.js je množstvo premenných, ktoré môže užívateľ ľubovoľne upravovať, aby docielil požadovaný efekt svojho tooltipu. Možností je naozaj veľa, od veľkosti, rýchlosti zobrazenia, farieb, fontov, cez nastavenie možnosti animovania tooltipu až po nastavenie tieňovania či zobrazovania tlačítka na zavretie tooltipu.

Extensions

Silnou stránkou Wz_Tooltipu je možnosť relatívne jednoduchej tvorby extenzií – pluginov. Cieľom pluginov je väčšinou ešte viac upraviť vhľad a funkčnosť tooltipu, ako umožňujú konfiguračné premenné v základnej verzií. Hotových pluginov nie je veľa, ale niektoré stoja za to, napríklad Ballon Tooltip, ktorý z tooltipu spraví skoro-komixovú bublinu. Extenzie sú na stiahnutie na adrese: http://www.walterzorn.com/…tensions.htm

Demo

Okrem toho, že Wz_Tooltip v akcii môžete vidieť aj tu na PHPBlogu (v ľavom menu), viac príkladov a ukážok nájdete na hlavnej stránke http://www.walterzorn.com/…ooltip_e.htm.