Proč je správné pozicování tak důležité?
Tooltip, který se odtrhne od okraje obrazovky, není jen špatně vypadající — ruší uživatelský zážitek a často skrývá informaci, kterou měl uživateli pomoci. Představte si situaci: používáte aplikaci na mobilním zařízení a najedete na ikonku otazníku. Místo aby se tooltip objevil vedle ikony, vyskočí mimo obrazovku a vidíte jen její spodní polovinu.
Právě o tom je tato příručka. Naučíme vás logiku, kterou používají profesionální návrhářské systémy, abyste vytvořili tooltips, které se vždy vejdou na obrazovku bez ohledu na to, kde se uživatel nachází. To zahrnuje JavaScript logiku, CSS strategie a praktické techniky.
Čtyři základní směry a fallback strategie
Standardně se tooltip zobrazuje na jednom ze čtyř směrů: nahoře, dole, vlevo nebo vpravo od prvku. Ale co když je prvek blízko kraje? Pak musíme mít plán B — fallback strategie.
Profesionální přístup pracuje takto: nejdřív se pokusíme umístit tooltip na preferovanou pozici. Když by se odtrhly okraje, automaticky přepneme na vedlejší pozici. Když ani ta nefunguje, zkusíme třetí. A když nic z toho nejde, umístíme tooltip centrálně a ujistíme se, že je alespoň částečně viditelný.
Klíčové číslo: potřebujete minimálně 12 pixelů okrajové vzdálenosti. To znamená, že tooltip nikdy nesmí být blíž než 12 pixelů od kraje obrazovky. Tomu se říká bezpečnostní zóna.
Implementace v JavaScriptu
Používáme metodu `getBoundingClientRect()`, která nám řekne přesnou pozici prvku na obrazovce. To je nezbytné pro výpočet, zda se tooltip vejde na danou pozici.
Logika se skládá ze tří kroků. Nejdřív zjistíme rozměry a pozici prvku. Pak vypočítáme, kde by se tooltip měl umístit. A nakonec zkontrolujeme, zda je dostačeně daleko od okrajů. Pokud ne, zkusíme vedlejší směr.
Nejčastěji se používá pořadí: top bottom right left. Pokud ani jeden z těchto směrů nevyhovuje, umístíme tooltip na střed a nastavíme mu maximální šířku.
CSS strategie pro fluidní chování
Na CSS straně potřebujeme správné hodnoty `position`, `transform` a `pointer-events`. Tooltip by měl být pozicionován absolutně vzhledem k nadřazenému prvku, který má `position: relative`.
Důležitý detail: Používejte `transform: translateX(-50%)` pro horizontální centrování místo `left: 50%` s negativní margin. Transform je efektivnější a nevytváří problémy se skládáním kontextů.
Dalším důležitým aspektem je `z-index`. Tooltip by měl být výrazně vyšší než ostatní prvky na stránce — obvykle 1000 nebo více. Tím zajistíte, že se nebude skrývat pod jinými prvky.
Specifika mobilních zařízení
Na mobilu je situace složitější. Obrazovka je úzká, takže horizontální pozicování (vlevo/vpravo) často nefunguje. Místo toho se přepínáme na vertikální — tooltip jde především nahoru nebo dolů.
Máte tři možnosti: buď dynamicky přepínáte strategie pro mobilní zařízení, nebo používáte jednu univerzální strategii. Profesionálové často volí kombinaci — preferují top/bottom na mobilu, ale ponechávají fallback na left/right pro případ, když je prvek v horní části obrazovky.
Pamatujte také na viewport meta tag — bez něj se mobilní zařízení mohou chovat nepředvídatelně. Měli byste mít `viewport-fit=cover` pro notchované telefony.
Poznámka ke kompatibilitě
Obsah v tomto průvodci je založen na standardních webových API a CSS vlastnostech, které podporují všechny moderní prohlížeče. Pokud pracujete s legacy prohlížeči (Internet Explorer 11 a starší), budete muset implementovat fallbacky. Metoda `getBoundingClientRect()` je dostupná od IE8, ale `transform` CSS vlastnost vyžaduje IE9+.
Praktické tipy k zapamatování
1. Vždy máte fallback
Nikdy se nespoléhejte na jedinou pozici. Máte-li preferenci top, pak musíte mít fallback na bottom, right a left. A na závěr centrální umístění.
2. Bezpečnostní zóna 12px
Jakýkoliv tooltip by měl mít minimálně 12 pixelů od okraje obrazovky. To zabrání tomu, aby se vizuálně ořezal nebo vypadal příliš blízko k hranici.
3. Transform místo margin
Při centrování použijte `transform: translateX(-50%)` místo negativní margin. Je to efektivnější a vyhne se problémům se skládáním kontextů.
4. Testujte na mobilech
Jak tooltips vypadají na notchovaných telefonech? Jak se chování změní u zařízení s malou obrazovkou? Testování na reálných zařízeních je nezbytné.
Teď máte základy. Další krok je naučit se stylovat tyto tooltips tak, aby vypadaly skvěle — o tom pojednává článek Styling šipek a stínů pro vizuální polep . Tam se dozvíte, jak přidat šipky, stíny a další vizuální prvky, které dělají tooltip profesionálním.
