仿bootstrap hover 提示字符

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

测试内容

如下是样式： .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; }

链接：https://www.jianshu.com/p/05f54b33e9d3