用js用多了，就疏忽了最基本的css了---用title屬性來實現提示框。下面言歸正傳------如何用css實現提示框：
1、利用title屬性來實現鼠標滑過某個元素時，實現提示整段內容的功能（利用title屬性時，提示框的樣式是默認的，而利用自定義的data-title屬性時，提示框的樣式和位置自己可以隨意定義），
首先，要將鼠標需要懸浮的元素相對定位,
再次，利用hover和偽類的絕對定位來顯示提示的內容
代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>提示框</title> 6 <style> 7 #box{width: 400px;margin: 100px auto;} 8 9 /*首先，要將鼠標需要懸浮的元素相對定位*/ 10 #con2{position: relative;margin: 40px auto;} 11 12 /*再次，利用偽類的絕對定位來顯示提示的內容*/ 13 #con2:hover:after{ 14 content: attr(data-title); 15 /*利用attr來讀取data-title的值*/ 16 position: absolute; 17 left: -120px; 18 top:30px; 19 border: 1px solid #ccc; 20 background: #f1f7f7; 21 border-radius: 5px; 22 padding: 10px 15px; 23 } 24 </style> 25 </head> 26 <body> 27 <div id="box"> 28 <div id="con" title="這是一個測試，這是一個測試，這是一個測試">這是一個測是...</div> 29 30 31 <div id="con2" data-title="這是第二個測試，這是第二個測試，這是第二個測試">這是第二個...</div> 32 </div> 33 34 </body> 35 </html>
效果圖如下
兩者的對比，第一個圖是利用自己定義的data-title屬性，提示框的樣式可以自己定義
第二個圖是利用title實行，提示框的樣式是默認的。兩者各有好處。