jquery - 使用 jQuery 在鼠标悬停时使用事件处理程序弹出一个弹出框 - 元素跟随鼠标

Question

我有以下 jQuery 代码：

        $('span.readMoreReputation').mouseover(function(event) {
        createTooltip(event);               
    }).mouseout(function(){
        // create a hidefunction on the callback if you want
        hideTooltip(); 
    });

    function createTooltip(event){          
        $('<div class="tooltip">test</div>').appendTo('body');
        positionTooltip(event);        
    };

    function positionTooltip(event){
        var tPosX = event.pageX - 10;
        var tPosY = event.pageY - 20;
        $('div.tooltip').css({'position': 'absolute', 'top': tPosY, 'left': tPosX});
    };      

它工作得很好，但我想复制 qtip（jquery 插件）的工作方式。在我将鼠标移到 READ MORE 文本（代码中的事件）上的那一刻，附加的 div 跟随鼠标围绕 READ MORE 文本。

我希望将其放置在 READ MORE 文本中的固定位置。

有什么想法为什么要这样做？

Answer 1

我试图使用 jQuery 函数 Offset 和 Position 使某些东西工作，但它们不会返回任何东西。也许这就是我在 jsfiddle 中的方式？Idk，无论如何，这是一种方法：http: //jsfiddle.net/jMYkS/1/

我添加相对于跨度的位置并将 div 绝对定位在其中。您可以更改 div 上的右/左和上/下值以相对于跨度移动它。