tooltip实现

生成tooltip完整流程:触发显示事件 -> 创建tooltip -> 调整tooltip位置 -> 添加动画 -> 显示tooltip -> 触发隐藏事件 -> 隐藏tooltip -> 删除tooltip

获取位置:top left




    test
    
    


    

根据弹出框大小,计算出显示位置的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)宽度

你可能感兴趣的:(tooltip实现)