本文是下記練習中，用css實現tooltip效果的總結。

tooltip.jpg

CSS實現tooltip效果，主要分為兩個方向：
1、通過設置box的before偽元素，width、height為0，然后用boder設置一個四個三角形組成的正方形，再用css3的rotate屬性進行旋轉。最后通過父元素的relative定位，子元素的absolute定位偏移即可完成。

• 好處：標簽少，可以單獨設置4個三角形的顏色。

通過border+rotate創(chuàng)建

效果圖

我是Demo，快戳我~~

2、通過設置box的before偽元素，設置一定的寬高（比如10px），然后旋轉這個小正方形,再用relative+absolute的定位偏移該正方形，得到我們要的箭頭。
優(yōu)點：標簽少
缺點：小箭頭的三角形顏色必須和外面包裹box的背景顏色相同，因為無法單獨設置每個小三角形的顏色。

無法單獨設置三角形的顏色

我是Demo，快戳我~~

3、通過在box的上方設置一個span標簽，與方法1相同，用border+定位來形成這個小三角形。
優(yōu)點：代碼量少。不需要使用旋轉屬性
缺點：需要多使用一個標簽。

通過span標簽設置

我是Demo，快戳我~~

4、用一個before偽元素來代替span標簽（推薦方法?。?br> 特點:標簽少、不使用旋轉功能。

用before偽元素代替span標簽

我是Demo，快戳我~~