Tooltip using javascript and html on hover

Question

JS function:

function DisplayToolTip() {
    document.getElementById('divToolTip').style.left = window.event.x;
    document.getElementById('divToolTip').style.top = window.event.y;
    document.getElementById('divToolTip').style.visibility = 'visible';
}

function HideToolTip() {
    document.getElementById('divToolTip').style.visibility = 'hidden';
}

HTML:

<span id="spanName" style="font-weight: bold;border: solid 2px red;" onmouseover="javascript:DisplayToolTip();" onmouseout="javascript:HideToolTip();">
    THIS IS THE SPAN
</span>

<div id="divToolTip" style="position: absolute; visibility: hidden; z-index: 20; background-color: white; border: solid 1px Blue;">
    This is ToolTip Text
</div>

With this I got a JS error that is window.event.x is not defined. Can anyone help me solve this problem?

If you're not doing this as a learning exercise, I'd suggest using qTip2, as it saves re-inventing the wheel. — Rory McCrossan
– Rory McCrossan, Commented Jan 28, 2013 at 10:00
It is not defined cause in your DisplayToolTip function you use event var, which should be passed to it as a function parameter. — kamil-mrzyglod
– kamil-mrzyglod, Commented Jan 28, 2013 at 10:01

Ram · Accepted Answer · 2013-01-28 10:25:10Z

1

You should use jQuery in this method

jQuery(".abc").mousedown(function(e){ 
        jQuery('#divToolTip').css('top',(e.pageY)+'px');
        jQuery('#divToolTip').css('left',(e.pageX)+'px');
        jQuery('#divToolTip').css('visibility', 'visible');
});

edited Jan 28, 2013 at 10:25

Ram

145k16 gold badges174 silver badges201 bronze badges

answered Jan 28, 2013 at 10:23

ap.singh

1,1604 gold badges15 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Tooltip using javascript and html on hover

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related