CSS—Tooltip

最新推荐文章于 2024-06-27 10:54:13 发布

天地之大

最新推荐文章于 2024-06-27 10:54:13 发布

阅读量368

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_35574915/article/details/52451387

版权

CSS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

两种样式：

样式1：实心tooltip

样式2：空心tooptip

比较全面的分析博客转自：http://www.cnblogs.com/daxiong/articles/3158630.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.tooltip {
				position: relative;
				display: inline-block;
				border-bottom: 1px dotted black;
			}
			
			.tooltip .tooltiptext {
				visibility: hidden;
				width: 120px;
				background-color: black;
				color: #fff;
				text-align: center;
				border-radius: 6px;
				padding: 5px 0;
				position: absolute;
				z-index: 1;
				top: -5px;
				right: 110%;
			}
			
			.tooltip .tooltiptext:after {
				content: "";
				position: absolute;
				top: 50%;
				left: 100%;
				margin-top: -5px;
				border-width: 5px;
				border-style: solid;
				border-color: transparent transparent transparent black;
			}
			
			.tooltip:hover .tooltiptext {
				visibility: visible;
			}
			
			.tag {
				width: 300px;
				height: 100px;
				border: 2px solid black;
				position: relative;
				background-color: #FFFFFF;
			}
			
			.arrow {
				position: absolute;
				width: 40px;
				height: 40px;
				bottom: -40px;
				left: 100px;
			}
			
			.arrow * {
				display: block;
				border-width: 20px;
				position: absolute;
				border-style: solid dashed dashed dashed;
				font-size: 0;
				line-height: 0;
			}
			
			.arrow em {
				border-color: black transparent transparent;
			}
			
			.arrow span {
				border-color: #FFFFFF transparent transparent;
				top: -3px;
			}
		</style>
	</head>

	<body style="text-align:center;">
		<div class="tooltip">Hover over me
			<span class="tooltiptext">Tooltip Text</span>
		</div>
		<div class="tag">
			<div class="arrow">
				<em></em><span></span>
			</div>
		</div>
	</body>

</html>