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 文本。

我希望将其放置在“阅读更多”文本的固定位置。

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

Answer 1

我试图使用 jQuery 函数 Offset 和 Position 来实现某些功能，但它们不会返回任何内容。也许这就是我在 jsfiddle 中的方式？我不知道，无论如何，这是一种方法:http://jsfiddle.net/jMYkS/1/

我添加了相对于跨度的位置，并将 div 放置在其内部的绝对位置。您可以更改 div 上的右/左和顶部/底部值，以相对于跨度移动它。