使用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上的右/左和上/下值以相對於跨度移動它。