javascript - 如何使工具提示在超宽元素上围绕光标 float

Question

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

因此可滚动区域可以是任意宽度，并且通常非常宽，达到数千像素。

我的问题是我有一个 HTML 元素，它延长了它应该是的日子，当我尝试在该元素上使用工具提示库时，他们试图将工具提示居中，这意味着我必须滚动到中间能够看到工具提示的屏幕宽度。否则工具提示会超出视口(viewport)。

所以我发现一些代码对工具提示做了处理，而不是 float 并停留在光标所在的位置，理论上这正是我需要的!

但是到目前为止，我尝试过的所有库都没有运气。我现在正在试验一些自定义的轻量级 jQuery，希望有人能提供帮助。

此图片显示了我的甘特图和 View 外的工具提示...

full size view

---

一些简单的测试....

此演示展示了一个基本的工具提示，其中工具提示会在鼠标光标到达的任何地方 float 。

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

http://jsfiddle.net/jasondavis/L2gmcxhc/

float 在光标周围的工具提示 HTML

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

工具提示的 jQuery

$(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');
    });

});

CSS

.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

现在，如果您观看此演示 http://jsfiddle.net/jasondavis/L2gmcxhc/1/我已经制作了当鼠标悬停时显示提示的元素，以模拟像我的甘特图这样的页面。

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

有没有简单的修复或解决方案？

Answer 1

尝试使用:

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