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

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

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

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

“插入者”

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

谢谢。

代替

$tooltip.css({top:tPosY,left:tPosX});

试试这个

$tooltip.animate({top:tPosY,left:tPosX},0);

删除

$tooltip

变量

完整代码：

$(".style13").mouseenter(function(e) { 
var tPosx = e.pageX;
var tPosy = e.pageY + 20;
$("<div class = 'tooltip'>"+$(this).attr('title')+"</div>").appendTo('body').css({left: tPosx, top: tPosy}) }).mouseleave(function() { $(".tooltip").remove(); });
$(".style13").mousemove(function(e) {
var x = e.pageX;
var y = e.pageY;
$(".tooltip").animate({left: x+15, top: y+25},0);
});

$（“.style13”）.mouseenter（函数（e）{
var tPosx=e.pageX；
var tPosy=e.pageY+20；
$（“”+$（this.attr（'title'）+“”）.appendTo（'body'）.css（{left:tPosx，top:tPosy}）}）.mouseleave（function（）{$（“.tooltip”）.remove（）；}）；
$（“.style13”）.mousemove（函数（e）{
var x=e.pageX；
var y=e.pageY；
$（“.tooltip”）.animate（{left:x+15，top:y+25}，0）；
});

您的定位码不起作用的原因是您正在使用“PageX”和“PageY”，而您应该使用“PageX”和“PageY”

var$tooltip=$（''）.insertAfter（'#myTable'）；
变量位置工具提示=函数（e）{
var tPosX=e.pageX；
var tPosY=e.pageY+20；
$tooltip.show（）；
$tooltip.css（{top:tPosY，left:tPosX}）；//它似乎不起作用。
};
var showTooltip=函数（e）{
var title=“title”；
$tooltip.text（title.show（）；
位置工具提示（e）；
}; 
var fadout=函数（）{
$tooltip.hide（）；
};
$（'.style13'）。悬停(
显示工具提示，淡出
).鼠标移动（位置工具提示）；​

---

查看此小提琴：

您没有调用positionTooltip函数。对不起，我忘了。刚刚加上去的。但它仍然在桌子下面。它不起作用，标题确实显示了，但位置就在桌子下面。不可能。如我所说，删除

$tooltip

变量。那么现在

tPosx

和

tPosy

包含鼠标进入单元格位置的x和y坐标，这怎么可能在桌子下面呢？哦，呵呵，应该注意到了！

$(".style13").mouseenter(function(e) { 
var tPosx = e.pageX;
var tPosy = e.pageY + 20;
$("<div class = 'tooltip'>"+$(this).attr('title')+"</div>").appendTo('body').css({left: tPosx, top: tPosy}) }).mouseleave(function() { $(".tooltip").remove(); });
$(".style13").mousemove(function(e) {
var x = e.pageX;
var y = e.pageY;
$(".tooltip").animate({left: x+15, top: y+25},0);
});

  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);​