Daar is geen javascript voor nodig hoor, en dat is maar goed ook anders dan zouden je tooltips (zo heten die dingen) niet werken als javascript uit staat. Wat volgt is een oplossing met HTML en CSS. Eerst de HTML.
HTML:
<p>Ga <a class="tooltip" href="#">hier<span>Dit is de inhoud van de tooltip</span></a> met de muis staan voor de tooltip</p>
Wat we hier zien is een korte paragraaf waarbij van het woord "hier" een link is gemaakt.* De tekst die straks in de tooltip terechtkomt staat er in een <span> naast. Met alleen de HTML komt de definitie dus pal naast het woord te staan, dan nu de CSS.
Allereerst:
Code:
.tooltip{
color:inherit;
text-decoration:none;
cursor:help;
border-bottom:1px dotted;
position:relative;
}
Dit deel zorgt er voor dat de link er niet meer als link uit ziet. In plaats daarvan zit er alleen een stippellijntje onder het woord "hier" en verandert de cursor in een vraagteken als je er met de muis op gaat staan.
Dan:
Code:
.tooltip span{
left:-999em;
position:absolute;
}
Dit verbergt de inhoud van de <span> door het hele geval een flink stuk naar links te verplaatsen waar het nooit in beeld zal komen. Om te zorgen dat die inhoud, de definitie dus, terugkomt als we op het woordje "hier" gaan staan hebben we nog één stuk CSS nodig.
Code:
.tooltip:hover span{
left:1em;
top:1.5em;
width:300px;
padding:3px;
background-color:lightblue;
border-radius:5px;
box-shadow:2px 2px 5px silver;
z-index:100;
}
Dit brengt de span bij :hover weer terug op het beeldscherm, iets onder en rechts van het woord waar het bij hoort. Met z-index wordt er voor gezorgd dat de tooltip boven de rest van de inhoud komt te staan. De overige CSS is er om vorm te geven aan de tooltip, hier kun je uiteraard ook andere waarden voor gebruiken (border-radius en box-shadow werken in IE overigens niet, tenzij je al IE9 gebruikt).
De CSS code hoort, zoals alle CSS code eigenlijk, in een apart CSS bestand dat je door
HTML:
<link rel="stylesheet" type="text/css" href="locatievanhetcssbestand.css">
In het head gedeelte van je html bestand te plaatsen aan je site kunt koppelen.
*dit had ook, netter, met nog een <span> in plaats van een link gekund maar dan had dit in IE6 niet gewerkt.
