本文是下记练习中，用css实现tooltip效果的总结。
tooltip.jpg
CSS实现tooltip效果，主要分为两个方向：
1、通过设置box的before伪元素，width、height为0，然后用boder设置一个四个三角形组成的正方形，再用css3的rotate属性进行旋转。最后通过父元素的relative定位，子元素的absolute定位偏移即可完成。
- 好处：标签少，可以单独设置4个三角形的颜色。
通过border+rotate创建
效果图
2、通过设置box的before伪元素，设置一定的宽高（比如10px），然后旋转这个小正方形,再用relative+absolute的定位偏移该正方形，得到我们要的箭头。
优点：标签少
缺点：小箭头的三角形颜色必须和外面包裹box的背景颜色相同，因为无法单独设置每个小三角形的颜色。
无法单独设置三角形的颜色
3、通过在box的上方设置一个span标签，与方法1相同，用border+定位来形成这个小三角形。
优点：代码量少。不需要使用旋转属性
缺点：需要多使用一个标签。
通过span标签设置
4、用一个before伪元素来代替span标签（推荐方法！）
特点:标签少、不使用旋转功能。
用before伪元素代替span标签
网友评论