jQuery trying to center tooltip over hovered element

Question

I am writing my own tooltip function like so:

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

However i am having difficulty centering the tooltip over the element that i am hovering over. I need this to scale to any size element that is hovered.

I appreciate that there are many plugins to achieve this functionality but i wanted to write my own so that the tooltip div would only ever appear in the same place in the code so that it is testable by my tester. This is a requirement from him to make his life easier :(

Answer 1

If you are using the latest version of jQuery and the jQuery-ui then you can use the position tool to center the tool tip above the element.

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

Edit in response to authors answer.

$(".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

The following does not seem to work for me:

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

It now just shows the tooltip to the top left of the screen.

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

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

Demo : http://jsfiddle.net/Nb3uW/