Ga met jouw muis over deze geprepareerde link om een fading tooltip te zien. Om dit effect op jouw pagina te gebruiken moet je bij elke link (waar je een tooltip wilt tonen) extra code toevoegen. Ik voeg hier een voorbeeld-link bij. <span onmouseover="toon_tooltip.aan('jouw tekst');" onmouseout="toon_tooltip.uit();"> <a href="/">tekst van de link</a></span>. Verder hoef je alleen nog maar het onderstaande javascript zo laag mogelijk in de body-sectie van jouw pagina te plaatsen. Het script is foutloos volgens de JSLint norm en is geheel cross browser. Bovenin het script (bij de css-code) kan je (als je daar behoefte aan hebt) het uiterlijk en de kleurstelling van de tooltip aanpassen. De weg wijst zichzelf.
<script>
var de_css_code = "#tooltip_de_inhoud_van{display:block;padding:20px;background:#005;color:#f5eec2;}"+
"#tooltip{display:block;position:absolute;font-size:15px;font-weight:bold;border-top:1px solid #003C54}",
stijl_element = document.createElement("style");
stijl_element.type = "text/css";
if (stijl_element.styleSheet) {
stijl_element.styleSheet.cssText = de_css_code;
} else {
stijl_element.appendChild(document.createTextNode(de_css_code));
}
document.getElementsByTagName("head")[0].appendChild(stijl_element);
var toon_tooltip = function() {
var fade_snelheid = 40;
var tooltip_id = 'tooltip';
var top = 4;
var links = 4;
var tool_breedte = 250;
var f_speed = 5;
var einde_alpha = 80;
var alpha = 0;
var tooltip = null,
t,
c,
b,
h;
var ie = document.all ? true: false;
return {
aan: function(v, w) {
if (tooltip === null) {
tooltip = document.createElement('div');
tooltip.setAttribute('id', tooltip_id);
t = document.createElement('div');
c = document.createElement('div');
c.setAttribute('id', tooltip_id + '_de_inhoud_van');
b = document.createElement('div');
b.setAttribute('id', tooltip_id + 'bot');
tooltip.appendChild(t);
tooltip.appendChild(c);
tooltip.appendChild(b);
document.body.appendChild(tooltip);
tooltip.style.opacity = 0;
tooltip.style.filter = 'alpha(opacity=0)';
document.onmousemove = this.pos;
}
tooltip.style.display = 'block';
c.innerHTML = v;
tooltip.style.width = w ? w + 'px': 'auto';
if (!w && ie) {
t.style.display = 'none';
b.style.display = 'none';
tooltip.style.width = tooltip.offsetWidth;
t.style.display = 'block';
b.style.display = 'block';
}
if (tooltip.offsetWidth > tool_breedte) {
tooltip.style.width = tool_breedte + 'px';
}
h = parseInt(tooltip.offsetHeight, 10) + top;
clearInterval(tooltip.fade_snelheid);
tooltip.fade_snelheid = setInterval(function() {
toon_tooltip.fade(1);
},
fade_snelheid);
},
pos: function(e) {
var u = ie ? event.clientY + document.documentElement.scrollTop: e.pageY;
var l = ie ? event.clientX + document.documentElement.scrollLeft: e.pageX;
tooltip.style.top = (u - h) + 'px';
tooltip.style.left = (l + links) + 'px';
},
fade: function(d) {
var a = alpha;
if ((a != einde_alpha && d == 1) || (a !== 0 && d == -1)) {
var i = f_speed;
if (einde_alpha - a < f_speed && d == 1) {
i = einde_alpha - a;
} else if (alpha < f_speed && d == -1) {
i = a;
}
alpha = a + (i * d);
tooltip.style.opacity = alpha * 0.01;
tooltip.style.filter = 'alpha(opacity=' + alpha + ')';
} else {
clearInterval(tooltip.fade_snelheid);
if (d == -1) {
tooltip.style.display = 'none';
}
}
},
uit: function() {
clearInterval(tooltip.fade_snelheid);
tooltip.fade_snelheid = setInterval(function() {
toon_tooltip.fade( - 1);
},
fade_snelheid);
}
};
} ();
</script>