效果圖：
為了便于差別，我們将那個三角形繪制成了紅色，顯示框繪制成了橙黃色。
首先介紹提示框的大緻制作方法：
- 做出上面三個元素：問号及其圓圈、三角形和長方形提示框
- 設定三角形及長方形提示框不可見
- 設定滑鼠經過問号時顯示提示框
下面我主要使用 <p> 選擇器來作為元素容器 -------------------------------------------------三個僞類用法--------------------------------------------------
這裡要用到 兩個 CSS僞類：hover，before(或after)
- hover
hover相信大家都已經很清楚，就是滑鼠懸停時産生的動作，較常見到的地方就是滑鼠移過一個按鈕時，按鈕變了樣。如下所示：
滑鼠經過後變成
- before
before是在某元素 前面 添加，其中比較重要的屬性就是content，表示将要添加的内容。如：
p:before{
content:'添加的内容'
}
注： 同樣的，after表示在元素後面添加内容
---------------------------------------------問号及其圓圈繪制-----------------------------------------------
圓圈主要用到CSS3的一個屬性：border-radius。本來一個元素（塊狀元素）是四邊形的，但是把它的border-radius設定成它長（或寬，這裡主要是指正方形）的一半，它就看起來像是一個圓了（ IE8及以下無效 ）。 比如以下一個CSS樣式：
p{width:20px; height:20px; background-color:green;}
它顯示出來的是一個邊長為20px的正方形
如果給它加上 border-radius:50%; 它就變成半徑為10px的圓了。
最後，帶問号的圓的CSS：
p{width:20px; height:20px; background-color:green; border-radius:50%; text-align:center; }
p:before{content:'?'; color:orange; font-weight: bold;}
效果
-------------------------------------------------三角形繪制--------------------------------------------------
三角形繪制隻要三個語句就可以：
p:before{
content:'';
border: 10px solid transparent;
border-bottom-color:#F3252D;
}
這三個屬性是繪制三角形的最簡語句，缺一不可。 效果：
最後那個橙黃色的框框就不寫了，相信大家都會。
TIPS: 如何設定陰影：
box-shadow:10px 20px 15px rgba(4,235,4,0.2);
前面兩個參數分别代表陰影在右邊，下邊（負數的話就是左邊，上邊），第三個參數表示羽化半徑(使它看起來是模糊的），rgba中的四個參數分别表示 red、green、blue、alhpa，即紅、綠、藍以及透明度，透明度範圍在0~1之間。如下：
-------------------------------------------------最終代碼--------------------------------------------------
HTML:
<div class="tips">
<p>提示資訊的内容</p>
</div>
CSS:
.tips{
width:20px;
height:20px;
border-radius:50%;
background-color:green;
text-align:center;
}
.tips:before{
content:'?';
font-weight:bold;
color:red;
}
/*注：以上就是剛剛說的那個圓及它中間的問号*/
/*注：下面繪制長方形内容顯示框，并使它不顯示*/
.tips p{
display : none; /*剛開始時隐藏*/
width : 300px;
padding : 20px; /*此處使用padding而不用height，想想有何差別*/
border-radius : 5px; /*圓角*/
background-color : #fbcc7d; /*背景色*/
color : #000; /*文字顔色*/
box-shadow : 1px 1px 1px rgba(0,0,0,0.2); /*陰影*/
position : absolute; /*固定位置，不然會撐開頁面*/
left : auto; /*邊框起始位置*/
margin-top : 8px; /*邊框距離頂部8px，這是因為要在它上面加上一個三角形，8px是那個三角形的邊長*/
text-align : left; /*文字居左*/
}
/*注：下面給内容框添加一個三角形*/
.tips p:before{
content : '';
border : 8px solid transparent;
border-bottom-color : #F3252D;
position : absolute; /*位置固定*/
left : 5px; /*三角形與内容框的相對位置*/
top : -16px; /*使它在P元素的上面16px處（這16px就是三角形的邊長的兩倍）*/
}
/*給問号添加hover屬性*/
.tips:hover p{
display : block;
}
顯示效果：
至此，提示框就完成了。