一、CSS實現帶箭頭的提示框
1、帶箭頭的提示框如下圖所示：
2、實現這個小的倒置三角方法有兩種，（1）就是用一張圖片來實，這樣的實現如果圖片的位置不是處理得很好的話，會出現一些小瑕疵。（2）使用CSS樣式來實現。
3、下面具體介紹使用CSS樣式來創建這個倒置的三角。
（1）首先介紹CSS的盒子模型
網頁設計設計中常會有：內容(content)、填充(padding)、邊框(border)、邊界(margin)這幾個屬性，這幾個屬性類似日常生活的盒子，所以稱之爲盒子模型。
假定給一個DIV（盒子）50px的寬高，邊框爲25px，爲了更加直觀，將四周邊框的顏色都設置不同。如下圖：
樣式代碼如下：
border-color: #00f #f00 #ff0 #0ff;
border-style: solid;
border-width: 25px;
height: 50px;
width: 50px;
然後將左右下這幾個三角的顏色設置成與背景顏色相同，注意：CSS樣式的順序，”上->右->下->左“。所以將上述樣式
border-color：#00f transparent transparent 如圖：
這樣倒置三角就出現了，然後這樣實現最上面的三角效果呢？ 這裏只需再加一個三角，並且這個三角的上邊框的顏色是提示框內的背景顏色，其他邊框爲transparent。
上述代碼如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>帶三角的提示框</title>
<style>
/*提示窗口樣式*/
div.tooltipWindos{
width:250px;
height:100px;
border:1px solid #39F;
background-color:#FFF;
}
/*倒置三角樣式*/
div.invertedTriangle{
width:0;
height:0;
overflow:hidden;
border-width:15px;
border-style:solid;
position:absolute;
margin-left:110px;
}
/*倒置三角中背景三角樣式*/
div.backgroundTriangle{
border-color:#FFF transparent transparent;
margin-top:99px;
}
/*倒置三角中主三角樣式*/
div.mainTriangle{
border-color:#39F transparent transparent;
margin-top:101px;
}
</style>
</head>
<body>
<div class="tooltipWindos">
<div class="invertedTriangle mainTriangle"></div>
<div class="invertedTriangle backgroundTriangle"></div>
<label style="float:left; margin-left:10px; margin-top:15px;">這就是一個帶三角的提示框。</label>
</div>
</body>
</html>
border-style:solid; 這一項修改成 border-style: solid dashed dashed; 就可以解決兼容問題。具體原因及解說請參考博文 http://www.xuebuyuan.com/160534.html
二、鼠標在按鈕與提示框上提示框不隱藏的Javascript的實現，效果圖如下：
當鼠標移至按鈕上上述提示圖出現，並且當鼠標移至提示框，提示框也顯示，如果移除按鈕或者提示框時，提示框隱藏。
實現的Javascript代碼如下：這裏還加入jQuery庫應用。
</pre><pre name="code" class="css">.hide{ display: none;} （加入hide類）注“DownMobileClient”是按鈕的ID；“DownMobileClientWindos”是提示框的ID。<span style="white-space:pre"> </span>$("#DownMobileClient").mouseover(function(){
<span style="white-space:pre"> </span>$("#DownMobileClientWindos").removeClass("hide");
$("#DownMobileClientWindos").unbind("mouseout");
$("#DownMobileClient").mouseout(function(){
$("#DownMobileClientWindos").addClass("hide");
});
});
$("#DownMobileClientWindos").mouseover(function(){
$("#DownMobileClientWindos").removeClass("hide");
$("#DownMobileClient").unbind("mouseout");
$("#DownMobileClientWindos").mouseout(function(){
$("#DownMobileClientWindos").addClass("hide");
});
});