Menu
I have a funtion that lets a div follow the mouse on a tooltip. The thing is my tooltips appear above what they hover and if there longer then 2 lines they over lap the content.
it’s sorta hard to explain but I need this function to postion using “bottom” not “top” so that no matter how big the tooltip gets it will always sit above the content it is hovering.
Thanks sooo much for anyone who can help.
[code=html]function followMouse(e){
// offset from the cursor
var offsetx = -27;
var offsety = -60;
var posx = 0;
var posy = 0;
var tooltip = document.getElementById(‘tooltip’);
if (!e) {
var e = window.event;
}
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.documentElement.scrollLeft;
posy = e.clientY + document.documentElement.scrollTop;
}
if (window.innerWidth || window.innerHeight){
docwidth = window.innerWidth;
docheight = window.innerHeight;
} else if (document.documentElement.clientHeight || document.documentElement.clientWidth) {
docwidth = document.documentElement.clientWidth;
docheight = document.documentElement.clientHeight;
} else if (document.body.clientWidth || document.body.clientHeight){
docwidth = document.body.clientWidth;
docheight = document.body.clientHeight;
}
// if tooltip goes beyond visible area, move it higher by it’s width
if ((docheight – (posy + offsety + tooltip.offsetHeight)) < 0 ) {
offsety *= -1;
offsety -= (tooltip.offsetHeight+offsety);
}
// same for the width
if ((docwidth – (posx + offsetx + tooltip.offsetWidth)) < 0 ) {
offsetx *= -1;
offsetx -= (tooltip.offsetWidth+offsetx);
}
tooltip.style.left = posx + offsetx + ‘px’;
tooltip.style.top = posy + offsety + ‘px’;
}
// the tooltip div
document.write(‘<div id=”tooltip” style=”display: none; position: absolute; top: 0; left; 0;”></div>’);