Als je niet weet wat een tooltip is moet je dit artikel zeker lezen!

Een tooltip is een blokje met een tekst er in dat je ziet als je met je muis ergens boven gaat staan.

Zet je muis maar eens boven deze link.

Een tooltip is erg handig om wat meer uitleg te geven als je weinig ruimte hebt. Een website van een kinderdagverblijf heeft bijvoorbeeld de menuknoppen:

Zet je muis maar eens boven deze link.

Een tooltip is erg handig om wat meer uitleg te geven als je weinig ruimte hebt. Een website van een kinderdagverblijf heeft bijvoorbeeld de menuknoppen:

BSO - KDV. Maar wat is nou BSO? Dat kun dan mooi in de tooltip zetten, omdat men eerst met de muis er boven moet gaan staan voordat men kan klikken. De tooltip heeft hier dus echt een belangrijke functie en zeker toegevoegde waarde.

Hoe doe je dat nou? Een tooltip kun je niet zomaar bij een stukje tekst zetten. Je kunt het wel doen als de tekst een link is naar een website of een andere pagina binnen je site ofzo. In dat geval ga je zo te werk:

In de HTML staat een standaard link zo beschreven:

<a href="http://www.alphameghosting.com" Zet je muis maar eens boven deze link</a>.

Dat ziet er dan zo uit:

Zet je muis maar eens boven deze link.

<a href="http://www.alphameghosting.com" title="Dit is dus een zogenaamde tooltip!">Zet je muis maar eens boven deze link</a>.

Dat ziet er dan zo uit:

 Zet je muis maar eens boven deze link.

Zoals je ziet is dit een link met een tooltip. Zo simpel is het. Je hoeft alleen dit kleine stukje tussen de HTML te zetten: title="Hier zet je wat je in de tooltip wilt hebben staan".

Voor tooltips bij plaatjes werkt het iets anders. Daar werken we niet met een tiltle maar met de alt-tag. Hier is een voorbeeld. Houd je muis maar eens boven dit plaatje:

Hier zie je dus een plaatje met tooltip, maar zonder link. We doen dat met de alt-tag. Dat is ook een tag die je in de HTML moet zetten. De meeste programma's zoals Dreamweaver en Frontpage hebben een speciaal vakje waar je dat kunt invullen, maar je kunt het ook gewoon zelf doen in HTML. Dat ziet er dan zo uit:

<img src="leejoo_jump_haan.gif" width="77" height="112" alt="Dit plaatje is van www.leejoo.nl zonder link naar zijn site.">

Je kunt ook een plaatje maken met een link, zoals dit plaatje:

De HTML code ziet er dan zo uit:

<a href="www.leejoo.nl"><img src="leejoo_floppy.gif" width="100" height="100" border="0" alt="Dit plaatje is van leejoo.nl en met een link naar zijn site. Ga maar eens kijken!"></a>

Dus eerst de link, dan het plaatje en dan de alt-tag, dat is de omschrijving van de tooltip.

Phhfffff. Dat was een hele kluif, hè! Toch is het wel eens goed om dit goed door te lezen en je eigen te maken. Het is eigenlijk heel simpel als je het goed bekijkt.

Veel succes met het toepassen van deze webdesigntips!