插件描述：JS原生tooltip提示框插件，鼠标悬停提示框，轻量级，大小只有2K，使用非常方便。
更新时间：2019-12-27 00:16:09
更新说明：更换DOM结构中的属性名：
tip改为data-tip
direction改为data-direction
更新时间：2019-12-25 00:25:37
更新说明：解决IE浏览器兼容性问题
更新时间：2019-12-23 22:54:11
更新说明：
1. 修复上个版本中IE兼容性BUG
2. 添加tooltip显示与消失的过渡效果
3. 添加yooltip显示与消失的回调函数
新版使用说明：
tooltip('.item');
tooltip('.item', null, enterCallback, outCallback);
tooltip('.item', ｛transition: true｝, enterCallback, outCallback);tooltip('.item', ｛transition: true, time: 200｝, enterCallback, outCallback);参数：
1. '.item'：需要添加tooltip提示的目标元素，必填项；若只给一个元素添加tooltip，可以使用id
2. ｛transition: true[, time: 1000]｝: 过度效果，transition：是否添加过度效果，time：过度效果的持续时间（单位为毫秒，默认为200毫秒）
3. enterCallback：tooltip显示时的回调函数
4. outCallback：tooltip消失时的回调函数
具体使用示例见demo
tooltip
效果类似bootstrap的tooltip
使用方法
1.引入tooltip.js和style.css文件
<link rel="stylesheet" href="style.css"> <script src="tooltip.js"></script>
2 DOM结构中
<!-- tip：tooltip提示框中的文本内容；direction：tooltip提示框的位置，可选值为top/right/bottom/left --> <li class="item" tip="Tooltip-top" direction="top">top</li> <li class="item" tip="Tooltip-right" direction="right">right</li> <li class="item" tip="Tooltip-bottom" direction="bottom">bottom</li> <li class="item" tip="Tooltip-left" direction="left">left</li>
tip：tooltip提示的文本内容
direction: tooltip的位置，可选值为top/right/bottom/left
3.JS中 tooltip(ele) ele：元素的class，必填项，若只给一个元素添加tooltip，可以使用id
tooltip('.item');
PREVIOUS:
NEXT:
相关插件-工具提示
讨论这个项目（11）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
往后余生 0
2020/3/18 15:37:30
-
直接用bootstrap 不就好了。。。
微笑，向前行！0
2020/6/2 17:46:59
-
要使之用这一个功能的话，引一个bootstrap太大了，不值当的
微笑，向前行！0
2020/6/2 17:48:22
-
而且bootstrap还要依赖jquery，相当于用这一个功能，你要引入jquery+bootstrap
莫欺少年穷 1
2020/3/1 17:13:10
部分代码：：：
el.addEventListener("mouseenter", function() {
var pos = el.getBoundingClientRect()
var currenLeft = pos.left,
currenTop = pos.top,
currenWidth = pos.width,
currenHeight = pos.height位置相对窗口来定位我觉得会好一些。如果存在table嵌套table的情况。给嵌套的table的tr上添加你这个方法。位置是有问题的哈。
莫欺少年穷0
2020/3/1 17:13:57
-
改了一下你的源码。见谅
微笑，向前行！0
2020/3/10 11:32:01
-
感谢您的建议，我会持续改进的。
IceRain0
2023/10/10 16:18:41
-
这个修改，兼容性更好，效果不错！👍
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
