jQuery的尝试在悬停的元素

Question

我写我自己的工具提示功能，像这样到中心提示：

$(".tip_holder").hover(
    function() { 

     var $containerWidth = $(this).width(); 

     var $containerHeight = $(this).height(); 

     var $tipTxt = $(this).text(); 

     var $tipTitle = $(this).attr('title'); 

     var $offset = $(this).offset(); 

     $('#icis_dashboard').prepend('<div id="tooltip">' + $tipTxt + '</div>'); 

     $('#tooltip').css({ 
      'position': 'absolute' 
     }); 

     var $tipWidth = $('#tooltip').width(); 

     var $tipHeight = $('#tooltip').height(); 

     $('#tooltip').css({ 
      'top': $offset.top - ($tipHeight + 5), 
      'left': $offset.left, 
      'padding': '0 5px 5px'    
     }); 

    }, 
    function() { 
     $('#tooltip').remove(); 
    } 
); 

但是我有困难定心了，我正在上空盘旋元素的提示。我需要这个来扩展到任何大小的元素。

我明白，有很多插件来实现这个功能，但我想写我自己的，所以tooltip div只会出现在代码中的相同位置，以便它可以由我的测试人员测试。这是他的要求让他的生活更轻松:(

Answer 1

如果您在使用jQuery的最新版本和jQuery的UI，那么你可以使用位置工具居中刀尖元素之上。

。

http://jqueryui.com/demos/position/

编辑回应作者回答

$(".tip_holder").hover(function(){ 
    var currentTipHolder = $(this); 
    var $tipTxt = $(this).text(); 
    var $tipTitle = $(this).attr('title'); 

    $('#icis_dashboard').prepend('<div id="tooltip">' + $tipTxt + '</div>'); 

    // jQueryUI position 
    $('#tooltip').position({ 
     of: currentTipHolder, 
     at: 'center top', 
     my: 'center bottom' 
    }); 
},function() { 
    $('#tooltip').remove(); 
}); 

Answer 2

下似乎并没有为我工作：

$(".tip_holder").hover(
    function() { 

     //var $containerWidth = $(this).width(); 

     //var $containerHeight = $(this).height(); 

     var $tipTxt = $(this).text(); 

     var $tipTitle = $(this).attr('title'); 

     //var $offset = $(this).offset(); 

     $('#icis_dashboard').prepend('<div id="tooltip">' + $tipTxt + '</div>'); 

     // jQueryUI position 
     function position(using) { 

      $('#tooltip').position({ 
       of: $('.tip_holder'),     
       at: 'center top',     
       using: using 
      });  

     } 

    }, 
    function() { 
     $('#tooltip').remove(); 
    } 
); 

它现在只是在屏幕左上方显示工具提示。

Answer 3

HTML：

<div id="icis_dashboard" ></div> 
blah blah<br/> 
blah blah<br/> 

<center> 
    <div class="tip_holder" >ToolTip !!</div> 
</center> 

blah blah<br/> 
blah blah<br/> 

CSS

.tip_holder { 
    color : #0099f9; 
    font : bold 20px Arial; 
    width : 100px; 
    background:#000; 
    border:1px #f0f; 
} 
#tooltip{ 
    color:#f0f; 
    background:#2f2f2f; 
    width:200px; 
    height:20px; 
    border:1px solid #000; 
    display:none; 
    text-align:center; 
    font : bold 15px verdana; 
} 

终于有些的JavaScript：

$(".tip_holder").hover(function() { 

     var $containerWidth = $(this).width(); 
     var $offset = $(this).offset(); 

     $('#icis_dashboard') 
      .prepend('<div id="tooltip">' + $(this).text() + '</div>'); 

     var $tipWidth = $('#tooltip').width(); 

     var $tipHeight = $('#tooltip').height(); 

     $('#tooltip').css({ 
      'top': $offset.top - ($tipHeight + 15), 
      'left': $offset.left - ($tipWidth - $containerWidth ) /2 , 
      'position':'absolute', 
      'display':'block' 
     }); 

     },function() { 
     $('#tooltip').remove(); 
}); 

演示：http://jsfiddle.net/Nb3uW/