JS原生tooltip提示框插件(原创)

所属分类:UI-工具提示

 8888  125  查看评论 (8)
分享到微信朋友圈
X
JS原生tooltip提示框插件(原创) ie兼容9

更新时间: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');
相关插件-工具提示

超漂亮的placeholders提示

超漂亮的placeholders提示
  工具提示
 28110  339

jquery 工具提示插件awTooltip

awTooltip是一个工具提示插件,用css和jQuery插件创建的。 它可以显示工具提示右,左,顶部或底部的元素。 也可以使用彩色工具提示样式。
  工具提示
 26778  256

仿win10侧边滑出提示框

一款模拟win10的消息提示框toastr
  工具提示
 21064  315

按首字母搜索(仿携程)

城市查找按首字母搜索(仿携程)
  工具提示
 33692  375

讨论这个项目(8)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ELLIPSIS 0
    2020/9/21 11:19:24
    往后余生 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
        感谢您的建议,我会持续改进的。
    回复
    我是一朵小白云 0
    2019/12/27 0:19:19

    非常不错,非常好。

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复