Css tooltips

Tooltips, wie kent ze tegenwoordig niet. Je gaat over een link, en er komt een kadertje tevoorschijn met wat info erin. Meestal zijn ze met javascript gemaakt, maar wij zullen het doen met css. Hier kan je zien wat we willen bereiken. De html is heel eenvoudig opgebouwd. Gewoon een link met daarin een span element.

1. De html

<a class="tooltip" href="#"><span>blog voor en door webmasters</span>csslabs</a>

2. De css

a.tooltip {
position:relative;
}

Dit stukje code is heel belangrijk. Het zorgt ervoor dat de tooltip op de juiste plaats komt, bij de link dus.

a:hover.tooltip {
padding:0;
z-index:10;
}

Als je wil dat het werkt in IE6, moet padding er staan. Padding mag ook een andere waarde hebben in plaats van 0. Z-index zorgt ervoor dat de tooltip boven alles komt te staan.

a span{
display:none;
}

Hiermee wordt de tooltip verborgen wanneer het nodig is.

a:hover span {
position:absolute;
display:block;
top:20px;
left:15px;
width:110px;
z-index:10;
/* pure opmaak vanaf hier */
background:#FFFFDF;
border:1px solid #FCF05C;
color:#333333;
padding:2px 3px;
font:11px tahoma, Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
}

Eerst wordt de tooltip (span) absoluut gepositioneerd. Zo kunnen we hem goed plaatsen met top en left. Display block zorgt er voor dat de tooltip weer zichtbaar wordt en z-index zorgt er opnieuw voor dat de tooltip boven alles komt te staan. De opmaak is belangrijk om je tooltip duidelijk leesbaar te maken.

Klaar, en dit allemaal zonder javascript!