Skip to Content

Bublinová nápověda pomocí CSS

Hledáte způsob, jak si ve svém stylu zobrazit doplňkové informace při najetí na odkaz např. v navigaci? Bublinová nápověda se většinou zobrazuje pod elementem s nastaveným atributem t i t l e, na který najedeme myší . Např.:

<a href="http://www.webtvorba.com/" title="vše o tvorbě internetových stránek">Webtvorba.com</a>

Existují různá řešení, jak si vytvořit své vlastní bublinové nápovědy např. kombinací Javascriptu a CSS. V tomto případě je to ale zbytečné, jelikož tohoto můžeme docílit jen pomocí samotných Kaskádových stylů.

Příklad použití:
Odkazu přidělte jedinečnou třídu, která odliší tento odkaz od všech ostatních na stránce. Samotný text, který se zobrazí v bublině, vložte do prvku span.
HTML:
Navštivte stránky <a href="http://www.webtvorba.com/" class="bublina">www.webtvorba.com<span>vše o tvorbě internetových stránek</span></a>

Jak už jsem vysvětlila v článku Obrazové mapy pomocí CSS, hlavní logika je v nastavení relativní pozice nadřazeného prvku, podle jehož hran se budou pozicovat podřízené elementy nastavené na hodnotu absolute: (viz níže)

a.bublina {
position: relative;
}

Zatím ještě necháme prvek schovaný:

a.bublina span {
display: none;
}

Nakonec nadefinujeme vlastnosti, které budou důležité při najetí myši (pseudotřída :hover) na odkaz, např. výšku a šířku posunu, hodnotu vnitřního okraje, barvu pozadí atd....

a.bublina:hover span {
display: block;
position: absolute;
top: 1em;
left: 2em;
padding: 0.2em 0.5em;
border: 1px solid black;
background-color: #9cf;
text-decoration: none;
color: black
}

Toto ovšem nefunguje v IE testeru při nastavení na IE6. Jedno možné řešení je v nastavení velikosti písma na sto procent v pseudotřídě.