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

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

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

看到这个小提琴：http://jsfiddle.net/muY37/40/

Answer 2

而不是

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

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

2 个答案: