jQuery essayant de centrer infobulle sur l'élément plané

Question

Je suis en train d'écrire ma propre fonction infobulle comme ceci:

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

Cependant, j'ai de la difficulté de centrage l'info-bulle sur l'élément que je suis planant au-dessus. J'ai besoin de cela à l'échelle de n'importe quel élément de taille qui est plané. J'apprécie le fait qu'il existe de nombreux plugins pour réaliser cette fonctionnalité, mais je voulais écrire le mien afin que le div de l'info-bulle apparaisse seulement au même endroit dans le code afin qu'il soit testable par mon testeur. Ceci est une exigence de lui pour rendre sa vie plus facile :(

Answer 1

Si vous utilisez la dernière version de jQuery et jQuery-ui vous pouvez utiliser l'outil de position pour centrer la pointe d'outil au-dessus de l'élément.

.

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

Modifier en réponse aux auteurs répondent

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

Ce qui suit ne semble pas fonctionner pour moi:

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

Il affiche maintenant simplement l'info-bulle en haut à gauche de l'écran.

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

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

Démo: http://jsfiddle.net/Nb3uW/