zoukankan      html  css  js  c++  java
  • 纯CSS 实现tooltip 内容提示信息效果

    纯CSS 实现tooltip 内容提示信息效果

    Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验。

    实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示。实现方法也非常简单。

    html结构

    <a class="css-tooltip" href="http://fatesinger.com/73887" data-tooltip="137 likes with 3.43k reads">WordPress Theme Pivot</a> 

    可以看到关键有2点,意识有 css-tooltip 标签,二是用 data-tooltip 保存提示信息。

    css代码

    .css-tooltip{position:relative}
    .css-tooltip:after{background-color:rgba(0,0,0,0.8);border-radius:3px;bottom:30px;color:#fff;content:attr(data-tooltip);display:none;font-size:12px;left:50%;line-height:1.3;padding:5px;position:absolute;text-align:center;width:160px;margin-left:-85px}
    .css-tooltip:before{content:"";border:4px transparent solid;border-top-color:rgba(0,0,0,0.8);position:absolute;bottom:22px;left:50%;display:none;margin-left:-4px}
    .css-tooltip:hover:after,.css-tooltip:hover:before{display:block}
    

    PS

    • 也可以使用 .xxxx[data-tooltip] 这种选择器。
    • 尽量不要和 title 标签同时使用,会比较不美观。
  • 相关阅读:
    UVA
    UVALive
    找一
    买书最低价格
    NABCD模型分析
    二维数组--首尾
    结对开发---环
    结对开发---二维数组
    电梯设计需求调研报告
    数组求和(2)
  • 原文地址:https://www.cnblogs.com/sunshq/p/4325434.html
Copyright © 2011-2022 走看看