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

Однако у меня возникают трудности с центрированием всплывающей подсказки над элементом, над которым я нахожу курсор.Мне нужно, чтобы это масштабировалось до любого элемента размера.

Я ценю, что есть много плагинов для достижения этой функциональности, но я хотел написать свой собственный, чтобы 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/