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

Question

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

因此，可滚动区域可以是任何宽度，并且通常在数千像素中非常宽。

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

所以我发现一些代码对工具提示做了反而浮动并留在光标所在的位置，理论上这正是我所需要的！

然而到目前为止，我尝试的所有库都没有运气。我现在正在尝试一些自定义的轻量级jQuery，并希望有人可以提供帮助。

此图显示我的甘特图和工具提示不在视图中......

full size view

一些简单的测试....

此演示显示了一个基本工具提示，其中工具提示会在鼠标光标移动时浮动。

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

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

在Cursor周围浮动的工具提示HTML

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

jQuery for tooltip

$(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/我已经制作了一个元素，当它被徘徊更宽时，显示toltip以模拟像我的甘特图这样的页面。

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

对此有简单的解决方法或解决方案吗？

Answer 1

尝试使用：

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

Answer 2

如果你想节省几个小时......

...使用本机浏览器工具提示。只需为要提供工具提示的元素提供title属性。

http://jsfiddle.net/jbw3bev2/2/

设置工具提示的样式

您可以使用CSS来设置工具提示元素的样式： https://stackoverflow.com/a/25813336/1990642