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的位置

回答

相关问题