Javascript 如何使工具提示围绕超宽元素上的光标浮动

我有一个横向滚动的甘特图。您可以使用滚动条、拖放和鼠标滚轮在我的应用程序的这一部分上水平滚动

因此，可滚动区域可以是任意宽度，并且通常在数千像素的范围内非常宽

我的问题是，我有一个HTML元素，它延长了它应该是的日期，当我尝试在元素上使用工具提示库时，他们尝试将工具提示居中，这意味着我必须滚动到屏幕宽度的中间才能看到工具提示。否则，刀尖不在视图端口内

因此，我发现一些代码可以处理工具提示，而不是浮动并停留在光标所在的位置，这在理论上正是我所需要的

然而到目前为止，我试过的所有图书馆都不走运。我现在正在试验一些定制的轻量级jQuery，希望有人能提供帮助

此图显示了我的甘特图和视图外的工具提示

---

一些简单的测试……

这个演示显示了一个基本的工具提示，其中工具提示浮动在鼠标光标所指向的位置

我在问题的底部有另一个演示来展示我的问题版本

围绕光标浮动的工具提示HTML

<div class="item">
    <p>This is my item</p>
    <div class="tooltip">Tooltip</div>
</div>

$(document).ready(function() {

    $(".item").mousemove(function(e) { 

        // put other effect in when moving over the element

        // from e you can get the pageX(left position) and pageY(top position) 
        // im not sure if it was the relative or the absolute position
        // i added 10 pxs on the top and left to show the tooltip a bit after
        $('.tooltip').css('left', e.pageX + 10).css('top', e.pageY + 10).css('display', 'block');

    });

    $(".item").mouseout(function() { 
        $('.tooltip').css('display', 'none');
    });

});

.item {
    position: relative;
    width: 100px;
    height: 40px;
    top: 200px;
    left: 400px;
    background: #CCC;
}

.item .tooltip {
    position: fixed; /** depends on how it handles the e.pageX and e.pageY **/
    width: 80px;
    height: 30px;
    background: #06F;
    z-index: 10;
    display: none; /**let the tooltip be not visable, when startup **/
}

CSS

<div class="item">
    <p>This is my item</p>
    <div class="tooltip">Tooltip</div>
</div>

$(document).ready(function() {

    $(".item").mousemove(function(e) { 

        // put other effect in when moving over the element

        // from e you can get the pageX(left position) and pageY(top position) 
        // im not sure if it was the relative or the absolute position
        // i added 10 pxs on the top and left to show the tooltip a bit after
        $('.tooltip').css('left', e.pageX + 10).css('top', e.pageY + 10).css('display', 'block');

    });

    $(".item").mouseout(function() { 
        $('.tooltip').css('display', 'none');
    });

});

.item {
    position: relative;
    width: 100px;
    height: 40px;
    top: 200px;
    left: 400px;
    background: #CCC;
}

.item .tooltip {
    position: fixed; /** depends on how it handles the e.pageX and e.pageY **/
    width: 80px;
    height: 30px;
    background: #06F;
    z-index: 10;
    display: none; /**let the tooltip be not visable, when startup **/
}

---

测试2

现在，如果您查看这个演示，我已经制作了一个元素，当toltip悬停得更宽时显示它，以模拟类似甘特图的页面

您将注意到，如果向右滚动，工具提示将丢失，并且不再在光标所在的位置浮动

有没有简单的解决方法？

尝试使用：

$('.tooltip')
    .css('left', e.pageX - $(window).scrollLeft() + 10)
    .css('top', e.pageY - $(window).scrollTop() + 10)
    .css('display', 'block');

如果你想抽出几个小时。。。 。。。使用本机浏览器工具提示。只需为要提供工具提示的元素提供一个

title

属性

设置工具提示的样式 可以使用CSS设置工具提示元素的样式：