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.
Související články
Možnosti stylování <iframe>
Co lze a nelze u <iframe> ovlivnit pomocí CSS a jak na změnu textu nebo barev.
Zvýraznění aktivní sekce při rolování
Moderní způsoby zvýraznění aktivní položky navigace podle aktuální sekce – CSS i IntersectionObserver.
