jquery中的工具提示鼠标移动问题

Tooltip mouse move issue in jquery

本文关键字:移动 问题 鼠标 工具提示 jquery      更新时间:2023-09-26

我在鼠标移动时使用了工具提示。它运行良好。但我无法访问锚点标签元素内部。鼠标光标不应该在工具提示容器内移动。我不使用任何插件作为工具提示。有人能解决这个问题吗。

$(document).on('mousemove','.showmobileRegfieldDef',function(e){
    var left = e.pageX - $(this).parent().offset().left - 70;
    var top = e.pageY - $(this).parent().offset().top + 300;
    $('#popup-content').css( {
        top: top,
        left: left
    } ); 
});
 var tooltips = document.querySelectorAll('.tooltip span');
       window.onmousemove = function (e) {
       var x = (e.clientX + 20) + 'px',
        y = (e.clientY + 20) + 'px';
        for (var i = 0; i < tooltips.length; i++) {
            tooltips[i].style.top = y;
            tooltips[i].style.left = x;
        }
    };

不确定你的问题到底是什么意思。无论如何,试试这个js。它也在锚标签内工作。:)

看看这把小提琴。希望我的回答能有所帮助。谢谢http://jsfiddle.net/JVDFc/

您不需要检查客户端位置以获取工具提示。我宁愿这样做:

addTooltip: function(element, text) {
     var tooltip = $("<span>").css({
            position: "absolute",
            display: "none",
            background: "yellow"
        }).addClass("tooltip").text(text);
     $(element).append(tooltip);
     $(element).hover(function(){
         tooltip.css("display", "block"); 
     }, function(){
         tooltip.css("display", "none"); 
     });
},

代码会将工具提示附加到相关元素上,并在您将鼠标悬停在它上面时显示它。现在您所要做的就是根据您的需要更改CSS,您就完成了