生成tooltip完整流程：觸發(fā)顯示事件 -> 創(chuàng)建tooltip -> 調(diào)整tooltip位置 -> 添加動畫 -> 顯示tooltip -> 觸發(fā)隱藏事件 -> 隱藏tooltip -> 刪除tooltip
獲取位置：top left
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="outer" style="width:500px;height: 500px;background-color: blue;margin: 50px auto;text-align: center;">
<div id="div1" style="width:300px;height: 300px;background-color: red;margin: 100px;float: left;"><p id="show-message"></p></div>
</div>
<script type="text/javascript">
$("#div1").on('click',function(){
var $element = $("#div1");
var text = "click";
$("#show-message").html(text);
var offset = $element.offset();
console.log(offset);
var bound = $element.get(0).getBoundingClientRect();
console.log(bound);
})
</script>
</body>
</html>
根據(jù)彈出框大小，計算出顯示位置的top,left
1、bottom時
1.1、top為定位元素（pos）的top+ 定位元素(pos)的高度
1.2、left為定位元素(pos)的Left – 定位元素(pos)的寬度/2 – tooltip元素寬度/2
2、top時
2.1、top為定位元素(pos) 的top-tooltip元素的高度
2.2、left為定位元素(pos)的left – 定位元素(pos)的寬度/2 – tooltip元素寬度/2
3、left時
3.1、top為定位元素(pos)的top – 定位元素(pos)的高度/2 – tooltip元素高度/2
3.2、left為定位元素(pos)的left – tooltip元素的寬度
4、right時
4.1、top為定位元素(pos)的top – 定位元素(pos)高度/2 – tooltip元素高度/2
4.2、left為定位元素(pos)的left + 定位元素(pos)寬度
