Mouseover Popup

[orjan]

in my .css, this is the code:

#ToolTip{position:absolute; width: 200px; top: 0px; left: 0px; z-index:4; visibility:hidden;}

the javascript is this:

ContentInfo = "";

topColor = "#808080"
subColor = "#C0C0C0"


var mouse_X;
var mouse_Y;

var tip_active = 0;

function update_tip_pos(){
        document.getElementById('ToolTip').style.left = mouse_X + 20;
        document.getElementById('ToolTip').style.top  = mouse_Y;
}

var ie = document.all?true:false;
if (!ie) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;

function getMouseXY(e) {
    if (ie) {
        // grab the x-y pos.s if browser is IE
        mouse_X = event.clientX + document.body.scrollLeft;
        mouse_Y = event.clientY + document.body.scrollTop;
    } else {
        // grab the x-y pos.s if browser is NS
        mouse_X = e.pageX;
        mouse_Y = e.pageY;
    }
    if (mouse_X < 0){mouse_X = 0;}
    if (mouse_Y < 0){mouse_Y = 0;}

    if(tip_active){
        update_tip_pos();
    }
}

function EnterContent(TTitle, TContent){
    ContentInfo = '<table border="0" width="200" cellspacing="0" cellpadding="0">'+
    '<tr><td width="100%" bgcolor="#000000">'+
    '<table border="0" width="100%" cellspacing="1" cellpadding="0">'+
    '<tr><td width="100%" bgcolor='+topColor+'>'+
    '<table border="0" width="90%" cellspacing="0" cellpadding="0" align="center">'+
    '<tr><td width="100%">'+
    '<font class="tooltiptitle">&nbsp;'+TTitle+'</font>'+
    '</td></tr></table></td></tr>'+
    '<tr><td width="100%" bgcolor='+subColor+'>'+
    '<table border="0" width="90%" cellpadding="0" cellspacing="1" align="center">'+
    '<tr><td width="100%">'+
    '<font class="tooltipcontent">'+TContent+'</font>'+
    '</td></tr></table></td></tr></table></td></tr></table>';
}

function tip_it(which, TTitle, TContent){
    if(which){
        update_tip_pos();
        tip_active = 1;
        document.getElementById('ToolTip').style.visibility = "visible";
        EnterContent(TTitle, TContent);
        document.getElementById('ToolTip').innerHTML = ContentInfo;
    } else {
        tip_active = 0;
        document.getElementById('ToolTip').style.visibility = "hidden";
    }
}

hope you can help. I haven't had time to learn this coding yet.

[alilg]

Okay, just replace this function

function update_tip_pos(){
        document.getElementById('ToolTip').style.left = mouse_X + 20;
        document.getElementById('ToolTip').style.top  = mouse_Y;
}

with this which i wrote

function update_tip_pos(){
        document.getElementById('ToolTip').style.left = parseInt(parseInt(mouse_X) + 20) +"px";
        document.getElementById('ToolTip').style.top  = mouse_Y + "px";
}

let me know it worked or not!
i tested if with firefox 2 and firefox beta 3

[orjan]

oh YES! it works!

now I can have multilined tooltips that really works. my users will salute you big time!

[TcM]

alilg - Good work! I gave you +rep