Question

I am trying to make a tool tip, I have the following html code:

<img src="url here" class="tooltip" alt="sometext here"/><br>
<img src="url here" class="tooltip" alt="sometext here"/>

and I have the following Jquery code:

toolTip = function(){
     jQuery('<span class="tip"></span>').prependTo('body').hide();
     showTooltip = function(event){
         $thisTxt = jQuery(this).attr('alt');
         var tPosX = event.pageX - 5;
         var tPosY = event.pageY +20;
         jQuery('.tip').text($thisTxt).css({top:tPosY, left:tPosX}).fadeIn();
     };
     hideTooltip = function(){
         jQuery('.tip').fadeOut();
     };
     jQuery('.tooltip').hover(showTooltip , hideTooltip);
 };

jQuery(document).ready(function(){
     toolTip();
});

Everything looks fine to me. but the tooltip does not flow above the img, instead, it always stay on left top of the window. I searched other posts, they suggest the position should be absolute. and I change the tip css to

 jQuery('.tip').text($thisTxt)
               .css({top:tPosY, left:tPosX, position:"absolute" })
               .fadeIn();

But then the tip does not appear at all. It is very weired. any tips on this problem would be appreciated.

Answer 1

That should be position: "absolute" – note the quotes. You may want to see the working example.