0

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

查询：

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

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

“插入之后”。

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

谢谢。

4

2 回答 2

2

您的定位代码不起作用的原因是您使用的是“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/

于 2012-07-31T19:54:51.507 回答
0

代替

$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);
});
于 2012-07-31T19:30:19.933 回答