纯CSS tooltip 提示

一般的tooltip,使用超链接的title,或者是css+javascript生成。

如果页面布局合理,样式结构清晰,可以使用纯CSS的提示。

demo如下:

 a.tooltip {
            position: relative;
        }

            a.tooltip span {
                display: none;
            }

            a.tooltip:hover span {
                display: block;
                position: absolute;
                top: 1em;
                left: 6px;
                padding:3px 3px;
                border:1px solid #ad7d7d;
                background-color:#ffff66;
                color:#000;
            }

<div>
   <a href="http://www.w3cplus.com/blog/tags/302.html" class="tooltip">SASS<span> SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。</span>
   </a>
</div>

 

 

posted @ 2014-03-12 21:19  daoyuly  阅读(343)  评论(0编辑  收藏  举报