漂浮后显示（不使用 tooltips）

漂浮后显示（不使用tooltips）

最新推荐文章于 2023-05-20 23:25:53 发布

原创最新推荐文章于 2023-05-20 23:25:53 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#漂浮后显示 #前端 #js #tooltips #ViewUI

js 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了如何在网页中实现元素的悬浮显示效果，无需使用工具提示，通过CSS和JavaScript实现元素的上下浮动和定位。

漂浮后显示（不使用 tooltips）

<td>
					<span class="hd2">概况</span> &nbsp;<span id="messageover" style="height:20px;" class="img-span why"></span>
</td>

<div id="messageovercontent" class="zib whycont">
	 <span style="font-weight:600">+++++：</span><br/>
	 <span >++++++++++</span><br/>
	 <span style="font-weight:600">@@@：</span><br/>
	 <span>@@@@@@@@@@@@@@@@@@@@@@</span><br/>
	 <span style="font-weight:600">###：</span><br/>
	 <span>######################</span>
 </div>

function getObUpperLeft(obj) {
	var curLeft = curTop = 0;
	if (obj.offsetParent) {
		curLeft = obj.offsetLeft;
		curTop = obj.offsetTop;
		while (obj = obj.offsetParent) {
			curLeft += obj.offsetLeft;
			curTop += obj.offsetTop;
		}
	}
	return [ curLeft, curTop ];
}


 $("#messageover").hover(function(){
				   var off = getObUpperLeft(this);
	               var x = off[0] + this.offsetWidth - 25;
	               var y = off[1] - 8;
	               
				   $("#messageovercontent").css({
					   top:y,
					   left:x
				   });
				   $("#messageovercontent").show();
			   },
			   function(){
				   $("#messageovercontent").hide();
			   });