jQuery trying to center tooltip over hovered element

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 :(

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

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/