css实现tooltip效果

 

 

<!-- html代码 -->
<div class="wrap">
  <h1>
    TOOLTIP 提示
  </h1>
  <p>
    鼠标移动到 <span class="tooltip" tooltip-data="提示框内容">这里</span> 查看提示.
  </p>
</div>

 

 

/* css代码 */
.wrap {
	text-align: center;
}

.tooltip {
	position: relative;
	border-bottom: 1px dotted black;
}

.tooltip:before {
	content: attr(tooltip-data);
	position: absolute;
	width: 250px;
	background-color: pink;
	color: #000;
	text-align: center;
	padding: 15px;
	font-size: 16;
	line-height: 1.1;
	border-radius: 5px;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.5s;
	bottom: 125%;
	left: 50%;
	margin-left: -60px;
}

.tooltip:after {
	content: '';
	position: absolute;
	bottom: 75%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	opacity: 0;
	transition: opacity 0.5s;
	border-color: pink transparent transparent transparent;
}

.tooltip:hover:before,
.tooltip:hover:after {
	opacity: 1;
}