简单 tooltip

最新推荐文章于 2023-11-27 21:00:00 发布

houwen85

最新推荐文章于 2023-11-27 21:00:00 发布

阅读量109

点赞数

分类专栏： js 文章标签： Microsoft HTML

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<style>
			.tooltip{
				position="absolute";
				padding = "3px";
				paddingRight = "1px";
				wordWrap = "break-word";
				borderStyle = "solid";
				borderColor = "gray";
				borderWidth = "1px";
				fontFamily = "VERDANA";
				filter="progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#DAE4ED) progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
		}
		
		.textDiv{
				position="absolute";
				width:100px;
				height:100px;
				padding = "3px";
				paddingRight = "1px";
				wordWrap = "break-word";
				borderStyle = "solid";
				borderColor = "gray";
				borderWidth = "1px";
				fontFamily = "VERDANA";
				filter="progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#DAE4ED) progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
		}
		</style>
			
		<script>
			function showTooltip(event){
				document.body.appendChild(getTooltip(event));
			}
			function getTooltip(event){
				var tooltipDiv = document.getElementById('tooltipDiv');
				if(tooltipDiv==null){
					tooltipDiv = document.createElement("DIV");
				} 
				var targetElement = event.srcElement;
				var msg = targetElement.innerHTML;
				tooltipDiv.innerHTML = unescape(msg);
				var divWidth =  (msg.length?msg.length:0)*2 > 250? 250 : msg.length*2;
				var divTop = event.y;
				var divLeft = event.x;
				divLeft = divLeft + divWidth > document.body.clientWidth? document.body.clientWidth - divWidth - 60 :divLeft;
					
				tooltipDiv.style.top = divTop;
				tooltipDiv.style.left = divLeft;
				tooltipDiv.style.width = divWidth;
				tooltipDiv.className="tooltip";
				tooltipDiv.id = "tooltipDiv";
				tooltipDiv.style.display='';
				return tooltipDiv;
			}
			
			function hideTooltip(){
				var tooltipDiv = document.getElementById('tooltipDiv');
				if(tooltipDiv!=null){
						tooltipDiv.style.display='none';
			  }
			}
		</script>
	</head>
	<body style="margin:0px;width:100%;heigh:100%;overflow:hidden;">
		<div class="textDiv"  οnmοuseοver="showTooltip(event);" οnmοuseοut="hideTooltip();">
			xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
			xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
			xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
		</div>
		
		<div class="textDiv" style="left:85%;" οnmοuseοver="showTooltip(event);" οnmοuseοut="hideTooltip();">
			1111111111111111111111111111111111<br>
			1111111111111111111111111111111111<br>
			1111111111111111111111111111111111<br>
		</div>	
	</body>
</html>

备注……

houwen85

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单 tooltip

&lt;html&gt; &lt;head&gt; &lt;style&gt; .tooltip{ position="absolute"; padding = "3px"; paddingRight = "1px"; wordWrap = "break-word"; borderStyle = "sol
复制链接

扫一扫

专栏目录