Question

I have a table that has many cells. Each cell has its own title.
What I want is to reposition the tooltip when the mouse moves.

JQuery:

   var $tooltip=$('<div id="tooltip"></div>').insertAfter('#myTable');
            var positionTooltip = function(event) {
      var tPosX = event.PageX;
      var tPosY = event.PageY + 20;
      $tooltip.css({top:tPosY,left:tPosX});// it seems to be not working.
           };
                 var showTooltip=function(event) {
           var title = $(this).attr("title");
           $tooltip.text(title).show();
                  positionTooltip(event);   
                }; 

  var fadout =function () { 
  $tooltip.hide(); 
  };
  $('.style13').hover(
  showTooltip,fadout
  );

CSS:

#tooltip {
display:none;                
background: #CCC630;
color: #AACBA;
text-align: left;
border-radius: 14px;
border: 2px solid white;
z-index:2;
margin-top:50px;
width:200px;
font-size:28px;
}

Right now the code is working well, the only thing is that the tootip is under the table because there is code. It is in the fixed position.

“insertAfter”.

How to modify the code or CSS to achieve my goal?

Thanks.

Answer 1

The reason your positioning code is not working is that you are using “PageX” and “PageY”, when you should be using “pageX” and “pageY”.

  var $tooltip=$('<div id="tooltip"></div>').insertAfter('#myTable');
            var positionTooltip = function(e) {
      var tPosX = e.pageX;
      var tPosY = e.pageY + 20;
$tooltip.show();
      $tooltip.css({top:tPosY,left:tPosX});// it seems to be not working.
           };
                 var showTooltip=function(e) {
           var title ="title";
           $tooltip.text(title).show();  
                     positionTooltip(e);
                }; 
 var fadout =function () { 
  $tooltip.hide(); 
  };

  $('.style13').hover(
      showTooltip,fadout
  ).mousemove(positionTooltip);​

See this fiddle: http://jsfiddle.net/muY37/40/