Popisek po najetí myší
Kterak zobrazovat obsah v tooltipu po najetí myši.
Jako popis obrázku nebo nápověda může sloužit obsah, který se objeví po najetí myší.
V čistém CSS lze využít pseudotřídu :hover.
element .skryvany {display: none}
element:hover .skryvany {display: block}Po najetí se objeví text.
Na tomto triviálním postupu je možné stavě i vyskakovací menu nebo právě různé popisky. Záleží jen na fantasii…
Hotový tooltip
Příklad popisku u běžného textu:
Popisek se objeví po najetí. Tooltip je absolutně posicovaný a centrován následovně, stín je vytvořen CSS vlastností box-shadow a šipka je nakreslená v CSS.
Popisek
- Popisek je možné animovat pomocí
transition. - Má-li být možné do popisku najet myší, je třeba ho nalepit k oblasti, která popisek vyvolává — jinak tooltip po ztracení
:hoveru u rodiče zmizí.
Popisky obrázkové galerie
S popisky pod obrázky:
Popisek obrázku
Popisek obrázku
Popisek obrázku
Popisek obrázku
Nebo s popisky nad obrázky:
Popisek obrázku
Popisek obrázku
Popisek obrázku
Popisek obrázku
JavaScriptový tooltip
V případě, že chceme vytvářet popisek z např. atributu title, je nutno tooltip řešit přes JS.
Co si myslíte o tomto článku?
Diskuse
Související články
CSS item-pack: balance – vyvážené rozložení flex položek
Vlastnost item-pack: balance rozděluje flex položky rovnoměrně mezi řádky, podobně jako text-wrap: balance vyvažuje řádky textu.
CSS Container Queries – responsivní komponenty
Jak pomocí @container, container-type a container-name vytvářet komponenty, které se přizpůsobí velikosti svého rodiče místo viewportu.
CSS Anchor Positioning – posicování elementů relativně k jiným
Jak pomocí anchor-name, position-anchor a funkce anchor() posicovat elementy relativně k jiným bez JavaScriptu.
Centrování na webových stránkách
Moderní způsoby vertikálního i horizontálního centrování v CSS. Flexbox, Grid, margin auto a další techniky.