Tooltip

Co je to Tooltip?

Tooltip je malá bublinková nápověda, která se objeví, když najedete myší na určitý prvek webu nebo když na něj klepnete na mobilním zařízení. Představte si to jako malou bublinu s vysvětlivkou, která se vám ukáže přesně ve chvíli, kdy potřebujete pochopit, co daný prvek dělá nebo co znamená.

Tooltip je jedním z nejužitečnějších nástrojů, které můžete na webu použít. Pomáhá návštěvníkům rychle pochopit funkci tlačítka, získat dodatečné informace nebo vyjasnit si význam pojmu, aniž by museli opouštět stránku nebo klikat na nějaké další odkazy. Je to jako mít po ruce nápovědu, která se objeví právě tehdy, když ji potřebujete. Tooltip je důležitou součástí kvalitního UX designu.

V českém prostředí se tooltip označuje také jako bublinková nápověda, kontextová nápověda nebo prostě jen nápověda. Všechny tyto názvy označují stejnou věc – diskrétní prvek, který poskytuje užitečné informace na vyžádání.

Jak vypadá tooltip v praxi?

Najeďte myší na tlačítko níže a uvidíte, jak tooltip funguje v praxi:

Tooltip se zobrazí nad prvkem v malé bublině s kontrastním pozadím. Šipka směřuje k prvku, ke kterému se tooltip vztahuje, aby bylo jasné, co vysvětluje. Jakmile myší odjedete, tooltip zmizí.

Jak tooltip funguje v praxi?

Tooltip se typicky aktivuje jedním ze tří způsobů. Na počítači se nejčastěji zobrazí, když najedete kurzorem myši na daný prvek (tzv. hover state). Na mobilních zařízeních se tooltip objeví po klepnutí nebo podržení prstu na prvku. Některé pokročilé implementace tooltip zobrazují také při zaměření prvku pomocí klávesnice (focus), což je důležité pro přístupnost webu.

Textové tooltips jsou nejběžnějším typem. Obsahují krátký text, obvykle jednu až dvě věty, které vysvětlují funkci prvku. Typicky je uvidíte u ikon, kdy potřebujete vědět, co daná ikonka znamená – například ikona otazníku vedle formulářového pole může mít tooltip "Vložte své rodné číslo ve formátu 123456/7890".

Obrázkové tooltips obsahují kromě textu také malý obrázek nebo grafiku. Tento typ se hodí například u e-shopů, kde tooltip u názvu produktu může zobrazit miniaturní náhled obrázku produktu. Zákazník tak získá rychlou vizuální informaci bez nutnosti klikat na detail.

Interaktivní tooltips jdou ještě o krok dál. Mohou obsahovat odkazy, tlačítka nebo dokonce formulářová pole. Tyto tooltips zůstávají otevřené i po odjetí kurzoru, aby vám umožnily s obsahem interagovat. Používají se například pro složitější nápovědy nebo rychlé akce. Tyto pokročilé varianty se řadí mezi mikrointerakce, které zlepšují celkový zážitek z webu.

Každý tooltip má několik základních vlastností. Má trigger – prvek, který tooltip vyvolá. Má obsah – informaci, kterou zobrazuje. Má pozici – kde se zobrazí vzhledem k triggeru (nahoře, dole, vlevo, vpravo). A má časování – jak rychle se objeví a zmizí.

Výhody používání tooltipů

• Zlepšení uživatelské zkušenosti

Tooltip významně zlepšuje uživatelskou zkušenost tím, že poskytuje informace přesně tehdy, kdy je návštěvník potřebuje. Nemusí hledat nápovědu v dokumentaci nebo googlit, co daný prvek znamená. Informace je okamžitě dostupná přímo v kontextu, kde ji potřebuje použít. To šetří čas a snižuje frustraci.

• Snížení kognitivní zátěže

Webové stránky často obsahují spoustu informací a tlačítek. Tooltip pomáhá snížit množství textu a popisků zobrazených najednou na obrazovce. Místo dlouhých návodů a vysvětlivek můžete použít jednoduché ikony nebo zkrácené popisky, ke kterým tooltip dodá potřebný kontext. Web tak působí čistěji a přehledněji.

• Podpora onboardingu

Když návštěvník přijde na váš web poprvé, tooltip mu pomůže rychle se zorientovat. Může mu vysvětlit, k čemu slouží jednotlivá tlačítka, jak funguje navigace nebo co znamenají různé symboly. To je obzvláště užitečné u složitějších webových aplikací nebo administračních rozhraní. Tooltip je klíčovou součástí kvalitního onboardingu.

• Vyšší srozumitelnost formulářů

Formuláře jsou často problematickým místem webů. Uživatelé neví, co přesně mají vyplnit, v jakém formátu nebo proč danou informaci potřebujete. Tooltip vedle formulářových polí může tyto nejasnosti odstranit. Vysvětlí požadovaný formát, poskytne příklad nebo zdůvodní, proč dané pole potřebujete.

• Úspora místa na obrazovce

Tooltip umožňuje zobrazovat dodatečné informace bez zabírání cenného místa na stránce. Místo dlouhých vysvětlujících textů můžete použít tooltip, který se zobrazí pouze těm uživatelům, kteří informaci skutečně potřebují. Ostatní návštěvníci, kteří už vědí, co dělají, nejsou rušeni zbytečnými texty.

Kdy používat a kdy nepoužívat tooltip

Kdy POUŽÍVAT:

• Pro vysvětlení ikon a symbolů

Ikony mohou mít různý význam pro různé lidi. Tooltip zajistí, že každý pochopí, k čemu ikona slouží. Například ikona tří teček, šestihranu nebo ozubeného kola může mít tooltip "Nastavení".

• Pro doplňující informace

Když má prvek základní popisek, ale potřebujete poskytnout více kontextu. Například u ceníkového balíčku může být nadpis "Standard" a tooltip může dodat "Nejvíce vybíraný balíček pro střední firmy".

• Pro vysvětlení formulářových polí

Když potřebujete vysvětlit formát údaje, poskytnout příklad nebo zdůvodnit, proč danou informaci sbíráte. Například u pole "PSČ" může tooltip říct "Zadejte PSČ ve formátu 123 45".

• Pro technické termíny

Když používáte odborný termín, který nemusí být všem jasný, tooltip může poskytnout jednoduchou definici. To je užitečné zejména v technických nebo specializovaných oblastech.

• Pro zkrácení dlouhého textu

Když máte dlouhý text nebo číslo, které se nevejde do rozhraní, můžete zobrazit zkrácenou verzi a v tooltipu ukázat plnou verzi. To se hodí například u dlouhých názvů souborů nebo URL adres.

Kdy nepoužívat:

• Pro kritické informace

Tooltip by nikdy neměl obsahovat informace, které jsou naprosto zásadní pro dokončení úkolu. Tyto informace musí být vždy viditelné a přístupné bez jakékoliv interakce. Uživatel by neměl muset "hledat" důležité informace.

• Pro dlouhé texty

Tooltip není určen pro odstavce textu. Měl by obsahovat maximálně jednu až dvě věty. Pokud potřebujete více textu, zvažte použití modálního okna, rozbalovacího panelu nebo samostatné sekce na stránce.

• Na mobilních zařízeních jako hlavní zdroj informací

Na mobilech je práce s tooltipy komplikovanější, protože neexistuje hover efekt. Pokud je informace důležitá, měla by být na mobilech viditelná přímo, ne schovaná v tooltipu.

• Pro navigační odkazy

Tooltip není tlačítko ani odkaz. Neměl by sloužit jako hlavní způsob navigace na webu. Jeho účel je informační, ne akční.

• Jako náhrada dobré uživatelské zkušenosti

Pokud váš web nebo formulář potřebuje příliš mnoho tooltipů, aby byl srozumitelný, je to často znamení, že potřebujete přepracovat celé rozhraní. Tooltip má pomáhat, ne kompenzovat špatný design.

Jak správně navrhnout tooltip

Délka textu je zásadní. Tooltip by měl obsahovat krátkou, jasnou informaci. Ideálně jednu větu, maximálně dvě. Pokud zjistíte, že potřebujete více textu, tooltip není správné řešení. Text musí být čitelný na první pohled – uživatel by neměl muset tooltip číst vícekrát.

Pozice tooltipu by měla dávat smysl. Většinou se tooltip zobrazuje nad nebo pod prvkem, ke kterému se vztahuje. Důležité je, aby tooltip nezakrýval důležitý obsah a aby byl dostatečně blízko k prvku, u kterého se objevil. Uživatel by měl okamžitě poznat, ke kterému prvku tooltip patří.

Timing – časování zobrazení a skrytí ovlivňuje uživatelský komfort. Tooltip by se měl objevit rychle, ideálně do 0,5 sekundy po najetí myší. Pokud se zobrazí příliš rychle (okamžitě), může být rušivý. Pokud se zobrazí příliš pomalu, uživatel už možná odjedel myší jinam. Při odjetí myši by tooltip měl zmizet s mírným zpožděním (například 0,2 sekundy), aby náhodné přejetí myší nezpůsobilo blikání.

Vizuální styl tooltipu by měl být konzistentní s designem vašeho webu. Tooltip by měl být zřetelně odlišitelný od běžného obsahu – obvykle má tmavší pozadí, kontrastní barvu a malou šipku ukazující na prvek, ke kterému patří. Text by měl být dostatečně velký a čitelný.

Kontrast a čitelnost jsou klíčové. Tooltip musí být dobře čitelný i pro lidi se zrakovým postižením. Doporučuje se dodržovat minimální kontrast 4,5:1 mezi textem a pozadím. Velikost písma by neměla být menší než 14 pixelů.

Responzivita – tooltip musí fungovat dobře na všech zařízeních. Na mobilech zvažte, zda tooltip vůbec potřebujete, nebo jestli by informace neměla být viditelná přímo. Pokud tooltip na mobilu používáte, ujistěte se, že se aktivuje klepnutím a že je dostatečně velký pro dotykové ovládání. To souvisí s principy responzivního designu.

Tooltip a přístupnost webu

Tooltip může být problematický z hlediska přístupnosti, pokud není správně implementován. Uživatelé, kteří používají čtečky obrazovky nebo navigují pouze pomocí klávesnice, musí mít k tooltipům stejný přístup jako ostatní návštěvníci.

Pro uživatele klávesnice musí být tooltip dostupný pomocí klávesy Tab. Když uživatel pomocí Tab přejde na prvek s tooltipem, tooltip by se měl automaticky zobrazit. Měl by zůstat zobrazený, dokud uživatel nepřejde na další prvek.

Pro čtečky obrazovky je důležité správné HTML označení. Tooltip by měl používat atribut aria-describedby, který spojuje tooltip s jeho trigger prvkem. Alternativně můžete použít atribut title, ale ten má omezení a ne všechny čtečky ho spolehlivě přečtou.

Vizuální uživatelé se zrakovým postižením potřebují dostatečný kontrast a možnost přiblížení. Tooltip by měl zůstat čitelný i při zvětšení stránky na 200 %. Barvy by měly splňovat standardy přístupnosti (WCAG).

Pro uživatele s motorickým postižením může být problém přesně namířit myš na malý prvek. Proto tooltip trigger by měl být dostatečně velký (minimálně 44x44 pixelů na dotykových zařízeních). Tooltip by také měl mít mírné zpoždění při mizení, aby uživatel měl čas přečíst obsah.

Někdy je lepší se tooltipu vyhnout a kritické informace zobrazit přímo na stránce. To je nejpřístupnější řešení pro všechny uživatele bez výjimky.

Jak vytvořit tooltip v HTML a CSS

Základní tooltip můžete vytvořit pomocí HTML atributu title. Tento přístup je nejjednodušší, ale má omezené možnosti stylování:

<button title="Uložit dokument">Uložit</button>

Pro vlastní design použijte CSS s pseudo-elementem ::after nebo ::before a stavem :hover:

.tooltip-trigger {
    position: relative;
}

.tooltip-trigger::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    background: #333;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}

.tooltip-trigger:hover::after {
    opacity: 1;
    visibility: visible;
}

Moderní přístup využívá JavaScript knihovny jako Popper.js nebo Tippy.js, které řeší pozicování, responzivitu a přístupnost. Pro React projekty se osvědčuje React Tooltip nebo Radix UI Tooltip.

Související pojmy