© 2013 All rights reserved.
6

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:

Lorem ipsum no sit omnis deserunt.
Lorem ipsum no sit omnis deserunt.
Lorem ipsum no sit omnis deserunt.
Lorem ipsum no sit omnis deserunt.
Lorem ipsum no sit omnis deserunt.
Lorem ipsum no sit omnis deserunt.
Lorem ipsum no sit omnis deserunt.
Lorem ipsum no sit omnis deserunt.
Lorem ipsum no sit omnis deserunt.
Lorem ipsum no sit omnis deserunt.

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.

tooltip

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.

Comments (6)

Ahojdy všem, díky zaachimu za moc pěkný ToolTip. Mohl by mi ale někdo poradit, jak to rozjet pod Chromem? Ve FF to jede krásně, ale v Google Chrome se mi ten tooltip nechce nastylovat (barva pozadí, font atd.), a když vyskočí, je průhledný, nikoliv průsvitný.

Vím, že od vytvoření tohoto článku uběhlo už dost času, ale budu moc vděčný za jakoukoliv radu. Přede moc děkuju! :-)

Něco takového jsem nedávno hledal, potřeboval jsem otestovat, zda iGoogle Gadget povoli popup okno u myši (nepovodli ;), nikde žádnej pořadnej skript psát vlastní se mi nechtělo, nemám připraveným svoje knihovny na zjištovaní souřadnic myši a bojovat napříč různými prohlížeči je děs (to jsem ještě neznal jquery), díky kouknu a možná se volně inspiruji ;)

To mate pravdu.
Cross-browser javascript programovani neni zadna slava. Taky dost casto ztratim nervy.

Moc pěkný tooltip.

docela dobré, jen v IE6 nějak nefunguje a v IE7 pokud člověk naskroluje stránku, pak tooltips je někde nahoře a ne pod myší. ve firefoxu funguje perfektně

Skvělý skript jen se musí trochu upravit podle "Učeň Augustin" a pak funguje i v IE. Testováno v IE 7.

Add comment

About
Hi, i am programmer from the Czech Republic. I love web development (Ruby, Ruby on Rails, PHP, Nette) and iOS development (Objective-C, Cocoa).
To cooperate, here is my phone:
+420 608 836