JavaScript: ToolTip Script

Jednoduchý ToolTip, používaný pro zobrazení dalších informací k elementu stránky. ToolTip může obsahovat jak prostý text, tak zformátovaný HTML text.

ToolTip chápejte jako malé „vyskakovací okno“, které většinou doplňuje informace u elementu na stránce. Toto vyskakovací okno není vytvořeno novým oknem prohlížeče, ale pouze Divem, vhodně pozivovaným na stránce.

Vše je vidět na jednoduchém příkladu pokud myší přejedete přes zvýrazněné části textu:

Co všechno bude ToolTip umožňovat?

ToolTip bude tedy umožňovat zobrazit rozšířené informace u elementu v HTML. Bude obsahovat pouze jeden div, do kterého se pomocí JavaScriptu vloží vámi zadaný text.

Po najetí na element se okno zobrazí. Zde budeme využívat nastavení CSS vlastnosti visibility a její hodnoty visible, nebo hidden.

Při zobrazení bude okno navíc obsahovat efekt postupného zobrazení, jak je tomu na ukázce, kdy se okno plynule zobrazí a nakonec zůstane částečně transparentní.

Okno se defaultně zobrazuje vpravo dole od kurzoru (dle počátečního nastavení). Takto by mohla nastat situace, kdy by se okno zobrazilo až za hranicí otevřeného okna, musíme tedy ošetřit i tuto možnost a v takovém případě přesuneme okno na druhou stranu kurzoru.

ToolTip

Jako první si vytvoříme několik proměnných, umožňujících částečné nastavení okna.

Prakticky se jedná pouze o proměnné pro posun okna vzhledem ke kurzoru a proměnnou, obsahující identifikátor okna, kvůli možnosti nastylování.

Nyní je třeba vytvořit div, do kterého se bude ToolTip načítat a ve kterém se bude zobrazovat. Zde máme v podstatě dvě možnosti. Vložit div do stránky ručně, nebo jej vytvořit dynamicky. Kvůli jednoduššímu použití vytvoříme div dynamicky a rovnou mu nastavíme základní počáteční styly:

Div je vytvořený a tak můžeme pokračovat. Pustíme se do samotné funkce pro zobrazení ToolTipu.
Funkce bude obsahovat tři vstupní parametry:

• textový řetězec, který representuje obsah okna
• element, u kterého se tip zobrazuje
• šířku vytvořeného divu

Ve funkci nejprve zjistíme, zda je ve stránce již umístěn námi vytvořený div. V případě že ne, přidáme jej do stránky pomocí appendChild. Dále nastavíme rozměry a visibility na hodnotu visible.

Nakonec musíme vytvořit události pro myš, konkrétně pro onmousemove, při pohybu po elementu a onmouseout, při opuštění elementu:

Ve funkci je navíc volána funkce setOpacity. Tato funkce byla vysvětlena ve článku „Ajax Loader“ (http://www.zaachi...loader.html).

Další neznámou funkcí, která je použita je funkce pulseOn();, zajištující právě plynulé zobrazení okna a nastavení částečné transparentnosti:

Funkce využívá setOpacity, kterou volá ve velice krátkých intervalech a mění hodnotu opacity u vytvořeného divu. Konečnou hodnotu nastaví na 90 procent a div zůstane částečně transparentní. Kdybychom chtěli, aby byl div neprůhledný, museli bychom změnit hodnotu v cyklu na plných 10.

Event onmousemove, který zachytává pohyb nad elementem, je nastaven na funkci getMouseXY, která zjišťuje pozici kurzoru myši na aktuální stránce:

Funkce zjistí pozici myši a volá funkci setPosition, která konečně nastaví pozici vytvořeného divu. Zde se navíc ošetřuje zobrazení divu za okrajem okna, a případné upravení pozice:

Poslední funkcí, která je nastavená na event onmouseout, je hidetip, jež skryje okno. To se provede pouhým nastavením visibility na hodnotu hidden:

Styly okna

Jelikož vytvořený div obsahuje unikátní ID, můžeme mu vytvořit libovolné styly a přizpůsobit jej tak designu webu. Styly nastavíme klasicky:

Volání funkce

Při zobrazení voláme funkci tooltip, která obsahuje, jak již bylo zmíněno, tři vstupní parametry. První je textový řetězec zobrazení v divu, druhý je objekt elementu, nad kterým se tooltip zobrazí a třetí je šířka okna, zadaná jako číslo představující hodnotu v pixelech:

Do tipu můžeme vkládat i složitější elementy, jako libovolně zformátované HTML, například takto:

Závěrem

Zobrazit celý javascript můžete zde: tooltip.js.txt

Použití ToolTipu může být v některých případech poměrně praktické. Uvedený příklad je možné libovolně rozšiřovat a upravovat.