セルが多いテーブルがあります。各セルには独自のタイトルがあります。私が欲しいのは、マウスが動いたときにツールチップの位置を変えることです。
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を変更するにはどうすればよいですか?
ありがとう。