Chytrá komponenta

Tooltip

Malý tooltip s vysvětlením, který se objeví u tlačítka „?“. Když nad tlačítkem není místo, otočí se sám pod něj. Na telefonu se ukáže rovnou jako text.

Jen HTML a CSS. Najeďte v náhledu myší na otazník.

Struktura

Tlačítko a jeho vysvětlení

Vedle údaje je tlačítko s otazníkem a hned za ním text tooltipu. aria-describedby je propojí: screen reader po tlačítku přečte i tooltip.

Tlačítko obsahuje jen otazník, a tak má navíc aria-label, který řekne, k čemu je.

Trik návrháře

Tooltip nad tlačítkem

Tooltip zatím necháme vidět pořád, abychom ho mohli stylovat. Schovat ho je to poslední. Tooltip umístíme absolutně nad tlačítko a vycentrujeme.

Horní tooltip je uříznutý, protože nad tlačítkem není místo. Opravíme to za chvíli.

Styl

Kulaté tlačítko s otazníkem

Tlačítko zmenšíme do kroužku, aby nerušilo text, vedle kterého stojí.

Automatika

Tooltip, který se sám otočí

Novější CSS umí tooltip připnout k tlačítku jako ke kotvě (anchor positioning). Stačí říct „nad tlačítko, a když tam není místo, otoč to pod něj“.

Horní tooltip se přesunul pod tlačítko, spodní zůstal nahoře. anchor-scope na .hint zajistí, že každý tooltip najde svoje tlačítko, ne to první na stránce.

Chování

Ukázat jen na požádání

Teď tooltip schováme. Ukáže se, když na otazník najedete myší (:hover), nebo když na něj přejdete klávesou Tab (:focus-within).

Najeďte v náhledu myší na otazník. Na celé .hint, ne jen na tlačítko, proto tooltip nezmizí, když se myš přesune na něj.

Automatika

Na telefonu rovnou jako text

Na dotykové obrazovce neexistuje hover a schovaný tooltip by málokdo našel. Na úzké obrazovce a na zařízeních bez myši (hover: none) ho proto ukážeme rovnou pod údajem jako drobný text.

Čárka mezi podmínkami znamená „nebo“. hover: none se neptá na šířku, ale na to, jestli má zařízení myš.

Recept

Tooltip v kostce

aria-describedby propojí tlačítko s tooltipem
:hover pro myš, :focus-within pro klávesnici
kotvení s flip-block: tooltip se nevejde, tak se otočí
na dotykových zařízeních tooltip rovnou jako text

Kotvení je v CSS novinka. Kde ho prohlížeč neumí, ukáže tooltip hned za tlačítkem, jen bez otáčení. Pro jistotu můžete použít absolutní pozici z kroku 3.

← Zpět do rejstříku