<!-- 无 JS 代码,纯 CSS 实现 title 属性 hover 效果-->
<div data-msg="类title框展示"> Hover ME</div>
div{
	position:relative;
	width:120px;
	line-height:38px;
	margin:100px auto;
	color:#333;
	text-align:center;
	font-size:24px;
	cursor:pointer;
}

div:hover::before{
	content:attr(data-msg);
	position:absolute;
	top:-50px;
	left:10px;
	padding:2px 6px;
	display:inline-block;
	color:#333;
	border:1px solid #333;
	border-radius:5px;
	font-size:14px;
}

div:hover::after{
	content:"";
	border-top:5px solid #333;
	border-left:5px solid transparent;
	border-right:5px solid transparent;
	position:absolute;
	top:-6px;
	left:60px;
}
View Compiled
Rerun