jquery - 鼠标移动时重新定位工具提示

Question

我有一个包含许多单元格的表格。每个单元格都有自己的标题。我想要的是在鼠标移动时重新定位工具提示。

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

现在代码运行良好，唯一的问题是提示在 table 下面，因为有代码。它处于固定位置。

"insertAfter".

如何修改代码或 CSS 来实现我的目标？

谢谢。

Answer 1

您的定位代码不起作用的原因是您使用了“PageX”和“PageY”，而您应该使用“pageX”和“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);​

请参阅此 fiddle :http://jsfiddle.net/muY37/40/