在悬停时使用javascript和html的工具提示

时间:2013-01-28 09:58:00

标签: javascript jquery html tooltip

JS功能:

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>

有了这个,我得到了一个window.event.x is not defined的JS错误。任何人都可以帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:1)

你应该在这个方法中使用jQuery

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