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

标签 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>

有了这个,我得到了一个 JS 错误,即 window.event.x is not defined。谁能帮我解决这个问题?

最佳答案

你应该在这个方法中使用 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');
}); 

关于javascript - 悬停时使用 javascript 和 html 的工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14559489/

相关文章:

javascript - Android WebView 上 JavaScript 的奇怪行为(使用 jQuery) 'scrollTop'

javascript - 固定顶部导航 + 使用 Jquery 的粘性页脚

javascript - 从php循环调用javascript函数(接受参数)并处理javascript函数中的参数

javascript - Bootstrap Vue perPage 用于自定义列或行

javascript - 将 CSS 应用到 ionic 2 选项卡和导航栏

javascript - 在 javascript 中,我无法弄清楚如何使正则表达式仅替换捕获而不替换匹配

javascript - 如何从谷歌电子表格中提取数据到网站?

javascript - 处理提交事件 - jquery

html - 使用 getelementbyID 时如何隔离多个 innertext 条目

html - 如何在文章的引导列中使用 nth-child()