21 Jun, 2009

Eenvoudige CSS tooltip

Categoriën: crossbrowser |links |solution |tekst |Xhtml Strict

Misschien wel de korste manier om met CSS een tooltip te maken (1 regel HTML & 3 regels CSS). Tooltips kunnen zéér handig zijn voor je site, om bijvoorbeeld iets te verduidelijken, als toevoeging op de reeds bestaande browser tooltip.

HTML

Eenvoudige <a class="tooltip" href="#">Tooltip
<span>Dit is de eenvoudige tooltip tekst</span>
</a>.

CSS

a:hover {
background:#fff;
text-decoration:none;
}
a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}
a.tooltip:hover span{
display:inline;
position:absolute;
background:#fff;
border:1px solid #ccc;
color:#6c6c6c;
}

Gerelateerde Snippets

Geen reacties op "Eenvoudige CSS tooltip"

Reactie formulier


Demo: Eenvoudige CSS tooltip:

Advertenties

Volgende nieuwe Snippet:

  • Momenteel niks gepland.