在前端開發過程中，需求與項目引入的組件插件有點出入，所以自己封裝一個Tooltip氣泡提示框
原理：一個主體矩形+兩個相同的三角形，根據兩個三角形之間垂直方向的位移，形成邊縫線。（其中底層帶邊框的三角上移，前面帶背景色的三角下移）
原理圖：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>提示框</title>
<style>
/* 矩形 */
#tag {
width: 150px;
height: 50px;
border: 2px solid red;
border-radius: 4px 4px;
position: absolute;
background-color: green;
padding: 10px;
display: none;
}
/* 文字樣式 */
#tag span {
color: #fff;
}
/* 三角組合樣式 */
.arrow {
position: absolute;
top: -15px;
left: 25px;
}
/* 底層三角 */
.arrow .t1 {
border-width: 8px;
position: absolute;
border-style: solid dashed dashed dashed;
border-color: transparent transparent red;
top: -3px;
}
/* 頭層三角 */
.arrow .t2 {
border-width: 8px;
position: absolute;
border-style: solid dashed dashed dashed;
border-color: transparent transparent green;
}
</style>
<script>
//鼠標進入
function mouseOver(x){
document.getElementById('tag').style.display = 'block';
}
//鼠標離開
function mouseOut(x){
document.getElementById('tag').style.display = 'none';
}
</script>
</head>
<body>
<img οnmοuseοver="mouseOver(this)" οnmοuseοut="mouseOut(this)" src="smiley.jpg">
<div id="tag">
<div class="arrow">
<span class="t1"></span>
<span class="t2"></span>
</div>
<span>今天天氣真不錯！</span>
</div>
</body>
</html>
最終效果圖如下：
1.鼠標移入笑臉表情：
2.鼠標移出笑臉表情：
