生成tooltip完整流程：触发显示事件 -> 创建tooltip -> 调整tooltip位置 -> 添加动画 -> 显示tooltip -> 触发隐藏事件 -> 隐藏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>
根据弹出框大小，计算出显示位置的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)宽度
网友评论