Ben's Hobbyhoekje -- Tooltips in JavaScript

Tooltips in JavaScript

Tooltips zijn van die kleine venstertjes die verschijnen als je met je muis over een plaatje, knop of link gaat. Deze site gebruikt ze heel veel. Je moet die optie in je browser natuurlijk wel áán hebben staan, anders zie je ze niet.

Hieronder zie je een aantal emoticons. Als je er met de muis overheen gaat verschijnt er ook een tooltip, maar dan veel mooier dan wat Windows er van maakt.
Hier staat beschreven hoe je dat aanpakt.

De code staat onderaan deze pagina. Je kunt hem ook downloaden, inclusief de plaatjes.

De code bestaat uit vier delen:
1. Een JavaScript in de file alttxt.js, aan te roepen in de <HEAD>.
2. De definitie van een style-class. Deze staat in een <style>-block in de <HEAD>. Dit kan eventueel worden weggelaten
3. Aanroep van de JavaScript function writetxt() in de <BODY>. Deze function is gedefinieerd in de file alttxt.js.
4. Een stukje HTML in de <BODY>, waarmee de benodigde objecten worden gemaakt. Deze worden in het JavaScript gebruikt.

Er zijn drie parameters in de file alttxt.js die kunnen worden aangepast:

Variabele	Betekenis
dofade	Fade-in van de tooltip. Als dofade = true verschijnt de tooltip in stapjes (komt langzaam op). Als dofade = false spingt deze in één keer aan. Op deze bladzijde: dofade = false.
center	Als center = true verschijnt de tooltip gecentreerd onder de de muispijl. Als center = false wordt de tooltip rechts onder de muispijl geplaatst. Op deze bladzijde: center = true.
centertext	Als centertext = true wordt de text in de box gecentreerd; als centertext = false wordt de tekst links uitgelijnd. Op deze bladzijde: centertext = true.

Behalve het hierboven genoemde behoeft de file alttxt.js geen verandering.

De hier gebruikte style-class heet NavText. Met deze class wordt bepaald hoe de tooltip er uit ziet op het scherm: Afmetingen, font, kleur, rand, enz. Het attribuut background-color bepaalt de achtergrondkleur.
Op deze pagina is gekozen voor een blauwe achtergrond. Maar je kunt natuurlijk ook de zelfde kleur gebruiken als de achtergrond van de pagina. Als je het attribuut background-color weglaat wordt de tooltip transparant. Leuk om eens mee te experimenteren.
Het is ook mogelijk de style-class weg te laten. In dat geval verschijnt de tekst zoals de rest van de pagina, zonder de rand en de (afwijkende) achtergrondkleur. Als je de style-class weg wilt laten moet je het class-attribuut uit de HTML-code verwijderen, zie hieronder.
De JavaScript function writetxt() wordt aangeroepen met behulp van de event-handlers onMouseOver en onMouseOut. Je kunt ze als attribuut meegeven aan aan elke tag die deze attributen herkent. Hier is dat gedaan met de plaatjes zelf in de <img>-tgs. Maar het had ook gekund in de <TD>-tags waarmee de cellen van de tabel zijn gemaakt. Zie ook de opmerking onderaan deze bladzijde.
De HTML-code die de benodigde objecten maakt staat aan het einde van de <BODY>. Dit is een <div>-tag die verder geen tekst of plaatje omsluit. Hier wordt tevens de koppeling met de style-class en het JavaScript verzorgd.
- Het id-attribuut verwijst naar het object navtxt, dat wordt gebruikt in het JavaScript.
- Het class-attribuut verwijst naar de <style> in de <HEAD>.
- Het style-attribuut definieert het gedrag van de tooltip. Deze is namelijk altijd aanwezig. Door de aanroep van de function writetxt() wordt bijvoorbeeld visibility:hidden veranderd in visibility:show. Met position:absolute; top:-100px; width:0px wordt bepaald waar de (verborgen) tooltip zich bevindt bij het openen van de pagina. Deze wordt bij de aanroep van writetxt() verplaatst naar de positie van de muis.

Gebruik:

De code staat voor een deel in de <HEAD> en voor een deel in de <BODY>.

De code ziet er als volgt uit:

(Zet dit in de <HEAD>. De volgorde van de STYLE en het SCRIPT doet er niet toe).

<script src="alttxt.js"></script>

<style>
.NavText {
width:auto;
font-family : Arial;
font-size:10pt;
border-width:4px;
border-style:outset;
border-color:darkgray;
background-color:#052999;
color:white;
}
</style>

(Zet onderstaande code in de HTML-file. Bij voorkeur helemaal achteraan, net vóór de </BODY>-tag).

<div id="navtxt" class="NavText" style="position:absolute; top:-100px; left:0px; visibility:hidden"></div>

Downloaden:

Druk op de knop: File: voorb071.zip, 17 335 bytes.

Opmerking:

Natuurlijk kun je dit ook gebruiken bij het maken van een hyperlink met een plaatje. Als je dit wilt gebruiken met een "gewone" tekst-hyperlink moet je wat doen om de event-handlers onMouseOver en onMouseOut te kunnen gebruiken. Een trucje daarvoor is de volgende code:

<a href="xxxx.htm"><p style="cursor:pointer"
onMouseOver="writetxt('ToolTipTekst');"
onMouseOut="writetxt(0)">Hyperlinktekst</p></a>

Let op de <p>-tag binnen de <a>-tag, en de style die er voor zorgt dat de cursor een handje wordt als de muis over de tekst gaat.

Op aanraakschermen kun je niet boven een plaatje "Hoveren". Daar verschijnt de tooltip pas als je op een plaatje tikt.

Je kunt dit ook gebruiken om het soort popups te maken waarmee reclame wordt gemaakt. Zie daarvoor Lokale Popup in een DIV-tag I: mouseover / mouseout.

Je kunt ook CSS inzetten tooltips mee te maken. Zie het item Tooltips in CSS.