跟随鼠标的 Jquery 工具提示

Question

我只想让鼠标悬停在 div 上时跟随鼠标的工具提示。我想用这个:

http://flowplayer.org/tools/tooltip/

我让它工作了，但是当鼠标指针移动时，我无法让工具提示真正跟随鼠标。我知道这听起来像是个愚蠢的问题，但他们的网站没有此功能的任何演示，所以我想知道它是否受支持。谁知道如何使这项工作？感谢您的投入和时间!

Answer 1

我找到了 this在他们的网站上。

我会自己做..只是为了帮助你一点点:

<style>
    .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 **/
    }
</style>

<script type="text/javascript">
    $(document).ready(function() {
       $(".item").mousemove(function(e) { 
            // put other effects 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');

            // or in a simpler way:
            $('.tooltip').css({
                left: e.pageX + 10,
                top: e.pageY + 10
            }).css('display', 'block');
        });

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

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

如果我是您，您可以制作自己的工具提示，但这取决于您想要什么。

更新

三年后... 当然，现在您应该添加 debounce 或 throttle。