使用Javascript、div层进行title等信息浮出显示

最新推荐文章于 2021-06-20 02:08:23 发布

dengminhui

最新推荐文章于 2021-06-20 02:08:23 发布

阅读量289

点赞数

分类专栏：前端学习文章标签： JavaScript Linux CSS HTML ViewUI

前端学习专栏收录该内容

14 篇文章 1 订阅

订阅专栏

使用Javascript、div层进行title等信息浮出显示，示例代码如下：

<html>
<head>
    <style type="text/css">
      .xstooltip 
	  {
		visibility: hidden; 
		position: absolute; 
		top: 0;  
		left: 0; 
		z-index: 2; 

		font: normal 8pt sans-serif; 
		padding: 3px; 
		border: solid 1px;
	  }
    </style>

</head>


<body>
	<div id="test"   οnmοuseοver="xstooltip_show('tooltip_123', 'test', 0, 20);"    οnmοuseοut="xstooltip_hide('tooltip_123');">显示注释</div>
	<div id="tooltip_123" class="xstooltip">
		Time spent: 00:00:08<br/>
		Page viewed: 4<br/>
		Browser: Mozilla – 1.7.11<br/>
		Operating system: Linux - i686 (x86_64)
	</div> 
</body>
</html>
<script>
	function xstooltip_findPosX(obj) 
	{
	  var curleft = 0;
	  if (obj.offsetParent) 
	  {
		while (obj.offsetParent) 
			{
				curleft += obj.offsetLeft
				obj = obj.offsetParent;
			}
		}
		else if (obj.x)
			curleft += obj.x;
		return curleft;
	}

	function xstooltip_findPosY(obj) 
	{
		var curtop = 0;
		if (obj.offsetParent) 
		{
			while (obj.offsetParent) 
			{
				curtop += obj.offsetTop
				obj = obj.offsetParent;
			}
		}
		else if (obj.y)
			curtop += obj.y;
		return curtop;
	}

	function xstooltip_show(tooltipId, parentId, posX, posY)
	{
		it = document.getElementById(tooltipId);
		
		if ((it.style.top == '' || it.style.top == 0) 
			&& (it.style.left == '' || it.style.left == 0))
		{
			// need to fixate default size (MSIE problem)
			it.style.width = it.offsetWidth + 'px';
			it.style.height = it.offsetHeight + 'px';
			
			img = document.getElementById(parentId); 
		
			// if tooltip is too wide, shift left to be within parent 
			if (posX + it.offsetWidth > img.offsetWidth) posX = img.offsetWidth - it.offsetWidth;
			if (posX < 0 ) posX = 0; 
			
			x = xstooltip_findPosX(img) + posX;
			y = xstooltip_findPosY(img) + posY;
			
			it.style.top = y + 'px';
			it.style.left = x + 'px';
		}
		
		it.style.visibility = 'visible'; 
	}

	function xstooltip_hide(id)
	{
		it = document.getElementById(id); 
		it.style.visibility = 'hidden'; 
	}
</script>

dengminhui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Javascript、div层进行title等信息浮出显示

使用Javascript、div层进行title等信息浮出显示，示例代码如下： &lt;html&gt;&lt;head&gt; &lt;style type="text/css"&gt; .xstooltip { visibility: hidden; position: absolute; top: 0; left:...
复制链接

扫一扫

专栏目录