JS tooltip

JavaScriptový popisek po najetí myší na ikonu nebo text.

23. června 2014

4 minuty

O možnosti vytvoření lepšího atributu title čistě v CSS už jsem psal. Tento článek pojednává o JavaScriptovém řešení.

Zatímco u obyčejných obsahových webů doporučuji obyčejné title popisky spíš nepoužívat (text napsat do závorky). U webových aplikací, kde jsou k ovládání často dostupné jen ikony, je vysvětlující tooltip naopak vítaná záležitost.

Výchozí title trpí pro tuto potřebu zásadním nedostatkem – neobjevuje se ihned. Návštěvník tedy najede nechápavě na ikonu, nic se zdánlivě neděje, takže často odjede pryč, aniž by se mu popisek objevil.

Na první pohled by se CSS tooltip mohl zdát jako dostatečný. Nicméně v případě pokročilejších funkcí v praxi dřív nebo později narazíme na limity CSS.

CSS tooltip nastavuje elementům, které mají mít popisek, relativní posici. Máme-li tedy element posicovaný absolutně, budeme muset řešit přebíjení těchto hodnot.
Potřebujeme-li pro element overflow: hidden, je to konečná, protože se tím ořízne i popisek.
JavaScriptem lze zajistit inteligentní umístění tam, kde je místo. U CSS řešení se umístění bude muset určovat ručně.
Budeme-li chtít popiskem pohybovat při pohybu nad elementem, CSS na to bude krátké.
U uživatelského rozhraní fungující ve více vrstvách bude v CSS dost obtížné zajistit, aby se vše překrývalo, jak má.

Hotové řešení

Hotové řešení jednoduchého popisku. Projde všechny title na stránce, nahradí je data-atributy – to proto, aby původní popisky neotravovaly.

Jako potomek elementu <body> se vytvoří element pro zobrazování popisku. Ten se nakonec při najetí na značku s popiskem objeví na posici této značky.

Při odjetí myši se s menší časovou prodlevou popisek skryje.

Text s prvním a druhým popiskem.

A ještě text s třetím a čtvrtým popiskem.

Samostatná živá ukázka