高效-5css自定义提示信息

作者: 钱学敏 | 来源:发表于2018-05-20 14:49 被阅读0次

当要实现hover的时候显示提示信息，如果用title属性觉得效果太弱，但是又不想用js写，更不想引入tooltip第三方库，则可以使用css3的attr属性实现。
把文案放在data-title中,使用伪类实现。

03.gif

<p><span data-title="我是提示信息">鼠标移到我上面试试</span></p>

<style>
  span[data-title]{
    position: relative;
  }
  span[data-title]:hover:before{
    content: attr(data-title);
    position: absolute;
    top: -150%;
    left: 50%;
    color: #fff;
    padding:4px; 
    background: #383838;
    transform:translateX(-50%) ;
    white-space: nowrap;
  }
  span[data-title]:hover:after{
    content: '';
    position: absolute;
    left: 50%;
    transform:translateX(-50%) ;
    top: -20%;
    border: 6px solid transparent;
    border-top-color: #383838; }
  }
</style>

推荐一个好用的库