当要实现一个hover时显示提示信息的效果时,如果直接用title属性觉得效果太弱,而又不想引入第三方tooltip库,可以通过使用attr属性来实现。直接上主要代码片段吧:
<p>hello <span data-title="from me...">everyone</span> </p>
span[data-title]{
position:relative;
}
span[data-title]:hover:before{
content: attr(data-title);
position:absolute;
top:-150%;
left:50%;
transform:translateX(-50%);
white-space: nowrap;
}
这样就实现了一个简单的信息提示框,框中的下三角形可以通过css3用after来实现。