0

セルが多いテーブルがあります。各セルには独自のタイトルがあります。私が欲しいのは、マウスが動いたときにツールチップの位置を変えることです。

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を変更するにはどうすればよいですか?

ありがとう。

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 に答える