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