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

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

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

html结构

WordPress Theme Pivot

可以看到关键有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标签同时使用，会比较不美观。

纯CSS实现tooltip提示框，CSS箭头及形状之续篇--给整个tooltip提示框加个边框

在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

纯CSS实现3D正方体动画效果

前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图 ​

纯CSS实现的风车转动效果特效演示

【CSS】纯css实现立体摆放图片效果

1.  元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...

纯CSS实现tooltip提示框，CSS箭头及形状

本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入 ...

纯CSS实现轮播图效果，你不知道的CSS3黑科技

前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

纯CSS实现Tooltip

DEMO: span{ position:relative; display:inline-block; height:3em; width:3em; margin:0 0.4em; line-hei ...

一个纯CSS实现的卡片翻转效果

先上代码

正面

33.纯 CSS 创作牛奶文字变换效果