仿bootstrap hover 提示字符

1506737197152.gif

要实现的效果大概就是这样----

思路：对target 设置自data-msg 自定义属性
利用伪元素 content: attr(data-msg) 拿到内容
接下来就是针对伪元素进行定位以及修饰了，这里用到::before 作为箭头；

首先设置一个div，data-msg是悬停的内容
<div class="inner" data-msg = "这是悬停的效果">测试内容</div>

如下是样式：

.inner {
position: relative;
width:300px;
background: #39f;
}
/* 主要内容/
.inner:hover::after {
position: absolute;
content: attr(data-msg);
top: 35px;
left:-6px;
font-size: 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #000;
color: #ffffff;
}
/ 箭头*/
.inner:hover::before {
position: absolute;
top:21px;
left:0;
content: '';
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top:7px solid transparent;
border-bottom: 7px solid black;
}