O webu
Zobrazení popisku při najetí myší

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.