Using the code below am I able to display/hide a tooltip without any
problems, however once the tooltip is displayed its position is fixed
(based on where the mouse first hovered onto the object) and I would
like the tooltip to follow the mouse instead.
What must I change to do this ?
HTML
<a href="#" onMouseOver="showBox('help','text to display')"
onMouseOut="hideBox('help')">text link</a>
JS
function hideLayer(strLayer) {
if (document.getElementById) {
d = document.getElementById(strLayer);
if (d) {
d.style.visibility = 'hidden';
d.style.display = 'none';
}
}
else if (document.all) {
d = eval('document.all[\''+strLayer+'\']');
if (d) {
eval('document.all[\''+strLayer+'\'].style.visibility = \'hidden
\'');
eval('document.all[\''+strLayer+'\'].style.display = \'none\'');
}
}
}
function showLayer(strLayer) {
if (document.getElementById) {
d = document.getElementById(strLayer);
d.style.visibility = 'visible';
d.style.display = 'block';
}
else if (document.all) {
eval('document.all[\''+strLayer+'\'].style.visibility = \'visible
\'');
eval('document.all[\''+strLayer+'\'].style.display = \'block\'');
}
}
function getObj(name) {
if (document.getElementById) {
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all) {
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers) {
this.obj = document.layers[name];
this.style = document.layers[name];
}
return this;
}
document.onmousemove = getMousePosition;
if (!document.all) document.captureEvents(Event.MOUSEMOVE);
var mouse_x = 0;
var mouse_y = 0;
function getMousePosition(e) {
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
mouse_x = e.pageX;
mouse_y = e.pageY;
}
else if (e.clientX || e.clientY) {
mouse_x = e.clientX + (document.documentElement ?
document.documentElement.scrollLeft : document.body.scrollLeft);
mouse_y = e.clientY + (document.documentElement ?
document.documentElement.scrollTop : document.body.scrollTop);
}
}
function showBox(name, msg) {
var x = (mouse_x + 20) + 'px';
var y = (mouse_y + 0) + 'px';
var box = getObj(name);
box.obj.innerHTML = msg;
box.style.position = 'absolute';
box.style.top = y;
box.style.left = x;
showLayer(name);
}
function hideBox(name) {
hideLayer(name);
}
Similar Threads
