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();
  }
);

然而，我很难将工具提示集中在我悬停的元素上。我需要将其缩放到任何悬停的大小元素。

我很欣赏有很多插件可以实现这个功能，但我想编写自己的插件，以便工具提示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

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/

jQuery试图将工具提示集中在悬停元素上

2 个答案: