tooltip does not work

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.

no.good.at.coding · Accepted Answer · 2011-05-22T16:59:40.687

2

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

edited May 22 '11 at 16:59

answered May 22 '11 at 16:35

no.good.at.coding

20,221
2
60
51

@Yijie Li How doesn't it help? Does it still not work? Please see the fiddle I've linked to, it works just fine there. – no.good.at.coding May 22 '11 at 17:00
1

hi,the working examples works beatufully. but mines is still not..any way, I guess it is not a problem with the code. I will inspect other settings. thanks for your help. – bingjie2680 May 22 '11 at 17:10

tooltip does not work

1 Answers1