用css实现tooltip效果

2017-04-28 本文已影响117人 Aleph_Zheng

本文是下记练习中，用css实现tooltip效果的总结。

tooltip.jpg

CSS实现tooltip效果，主要分为两个方向：
1、通过设置box的before伪元素，width、height为0，然后用boder设置一个四个三角形组成的正方形，再用css3的rotate属性进行旋转。最后通过父元素的relative定位，子元素的absolute定位偏移即可完成。

通过border+rotate创建

效果图

2、通过设置box的before伪元素，设置一定的宽高（比如10px），然后旋转这个小正方形,再用relative+absolute的定位偏移该正方形，得到我们要的箭头。
优点：标签少
缺点：小箭头的三角形颜色必须和外面包裹box的背景颜色相同，因为无法单独设置每个小三角形的颜色。

无法单独设置三角形的颜色

3、通过在box的上方设置一个span标签，与方法1相同，用border+定位来形成这个小三角形。
优点：代码量少。不需要使用旋转属性
缺点：需要多使用一个标签。

通过span标签设置

4、用一个before伪元素来代替span标签（推荐方法！）
特点:标签少、不使用旋转功能。

用before伪元素代替span标签