Mouseover更改出現的div的位置

我在項目中使用此jQuery this工具提示。Mouseover更改出現的div的位置

問題是當我有很多東西出現在隱藏的工具提示（div）中。發生這種情況時，div高度更大，不適合屏幕，因此它會進入屏幕下方，部分div無法讀取。

我想讓div出現在鼠標指針的中間，而不是指針的右下角。

這可能嗎？

編輯：

這是jQuery代碼

/*=========================Tooltip NOT MINE===================================*/ 
    //Select all anchor tag with rel set to tooltip 
$('a[rel=tooltip]').mouseover(function() { 

    //Grab the title attribute's value and assign it to a variable 
    var tip = $(this).attr('title');  

    //Remove the title attribute's to avoid the native tooltip from the browser 
    $(this).attr('title',''); 

    //Append the tooltip template and its value 
    $(this).append('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody">' + tip + '</div><div class="tipFooter"></div></div>');  

    //Show the tooltip with faceIn effect 

    $('#tooltip').fadeIn('1000'); 
    $('#tooltip').fadeTo('100',0.9); 

}).mousemove(function(e) { 

    //Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse 
    $('#tooltip').css('top', e.pageY + 10); 
    $('#tooltip').css('left', e.pageX + 20); 

}).mouseout(function() { 

    //Put back the title attribute's value 
    $(this).attr('title',$('.tipBody').html()); 

    //Remove the appended tooltip template 
    $(this).children('div#tooltip').remove(); 

}); 
    /*=========================Tooltip END===================================*/

這是我得到的提示所有文本從我的數據庫

echo "<p class='resultInfo'><a rel='tooltip' class='tip' 
    title='<p class=title>Information: </p><p> 
    <span class=title>Knowledge</span><span>". $resultData['Knowledge'] ."<span  class=title>Competence: </span><span>". 
    $resultData['Competence'] ."<span class=title> 
    Skills: </span><span>". $resultData['Skills'] ."</span>'>" 
    . $resultData["Level"] . "<span class='icon'></span></a></p>";

劇本是爲我工作的偉大如上所述。唯一的問題是，回聲輸出有時會很長，導致我的div工具提示在屏幕高度上展開。所以，我要推光標中間的DIV了

來源

2012-04-25 Christos312

如果您發佈代碼，尤其是在jsfiddle.net示例中，這非常有幫助，因此我們可以看到問題的具體情況並可能爲您調整修複方法。但對你的問題的簡短回答是：「是的，這是可能的。」 – Marc 2012-04-25 16:24:54

同意馬克，一些小提琴會幫助... – TNCodeMonkey 2012-04-25 16:42:05

我編輯了我的第一篇文章... – Christos312 2012-04-25 16:53:06

經過大量的搜索中，我想我找到了

我改變了這種代碼

.mousemove(function(e) { 

    //Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse 
    $('#tooltip').css('top', e.pageY + 10); 
    $('#tooltip').css('left', e.pageX + 20);

要

.mousemove(function(e) { 

    //Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse 
    $('#tooltip').css('top', e.pageY - 100); 
    $('#tooltip').css('left', e.pageX + 20);

我不知道我以後會不會有一些奇怪的行爲，我會測試它。

來源

2012-04-26 08:16:51 Christos312

Mouseover更改出現的div的位置

回答

相關問題