title: jQuery trying to center tooltip over hovered element
body: <p>I am writing my own tooltip function like so:</p>
  
  <pre><code>$(".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('&lt;div id="tooltip"&gt;' + $tipTxt + '&lt;/div&gt;');
  
        $('#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();
    }
  );
  </code></pre>
  
  <p>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.</p>
  
  <p>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 :(</p>