鼠标工具提示js库V0.2

所属分类:UI-悬停,工具提示

 24145  309  查看评论 (9)
分享到微信朋友圈
X
鼠标工具提示js库V0.2 ie兼容10

安装

将下载后的mTips.js文件放到项目下,在需要的页面中导入。

此项目依赖JQuery.js,在使用前需要引入JQuery。

简单使用

第一步:在页面导入mTips.js

第二步:给标签添加属性data-mtpis

<div data-mtpis='写入提示文本'></div>

完成,快去看看吧!可以插入html代码。

不导入css样式文件一样可以显示,如果想要更多的样式,就需要导入css文件,这一点在下文可以看到。

注意

提示功能可能无法给动态生成的页面元素添加提示,但是这种情况已经修复。

使用

通过属性开启

<div data-mtpis='提示文本'></div>

给任意标签添加data-mtpis属性即可让此标签拥有鼠标工具提示功能。

如果想修改提示的文本,只需要修改data-mtpis属性的值即可。

通过js开启

通过js打开提示:

mTips.s('通过js控制的提示,并带有回调函数');

通过js关闭提示:

mTips.h();

实例:

//====================================
$('#app0').on('mouseenter', function(e) {
  //鼠标进入事件,显示提示
  mTips.s('通过js控制的提示,并带有回调函数');
});

$('#app0').on('mouseleave', function(e) {
  //鼠标离开事件,移除提示
  mTips.h();
});

通过属性设置样式

如果想要使用样式,必须在页面导入mTips.css文件

通过添加属性data-mtpis-style并设置属性值来完成样式的设置

<div data-mtpis='提示文本' data-mtpis-style='样式'></div>

共五种样式,其中default是默认样式,如果需要用默认样式,不需要单独设置。

<div data-mtpis='提示文本' data-mtpis-style='default'></div>
<div data-mtpis='提示文本' data-mtpis-style='success'></div>
<div data-mtpis='提示文本' data-mtpis-style='info'></div>
<div data-mtpis='提示文本' data-mtpis-style='warning'></div>
<div data-mtpis='提示文本' data-mtpis-style='danger'></div>

配色参考bootstrap

通过js设置样式

在第二个参数中传入样式参数

mTips.s('提示文本 ', '样式参数');

回调函数

当工具提示显示后,会调用回调函数,如果有的话。

在第三个参数中传入回调函数:

mTips.s('提示文本 ', '样式参数',function);

在不需设置样式的情况下,可以直接在第二个参数传入函数:

mTips.s('提示文本 ', function);

回调函数同样适用于关闭提示后:

mTips.h(function);

总结

参数列表

mTips.s('提示文本','样式参数',function);
  • 参数1:想要显示工具提示的元素,最好是$(this)

  • 参数2:用于提示的文本。

  • 参数3:当此参数为函数时,参数为回调函数,否则为样式参数。

  • 参数4:回调函数,当提示控件显示后调用。

mTips.h(function);
  • 参数1:可空,参数为回调函数,当提示控件被移除后调用。

属性列表

<div data-mtpis='提示文本' data-mtpis-style='样式'></div>
  • data-mtpis:用于显示的提示文本

  • data-mtpis-style:用于设置提示的样式

样式列表

  • default

  • success

  • info

  • warning

  • danger

配置项

mTips.c.x     //鼠标 x 的偏移量,默认是10
mTips.c.y     //鼠标 y 的偏移量,默认是10
mTips.c.style //样式,json格式,一般不需要修改

自定义

可以在css中添加一个自己喜欢的样式类,然后在函数传入样式类名即可,但是定义样式的时候必须添加mTips_作为前缀,以免和其他样式混合,并且在传入样式类名的时候不需要将前缀传入。

相关插件-悬停,工具提示

jQuery图片边框线条动画效果

本案例的主要效果是鼠标悬停在图片上,从其中的两个角分别延伸出两条线 类似两条河流交汇的效果
  悬停
 30978  344

c的鼠标滑过图片遮罩层动画jQuery插件

nsHover是一款简单实用的鼠标滑过图片遮罩层动画jQuery插件。该插件可以在图片或块级元素上制作鼠标滑过时的遮罩层动画效果,它可以设置遮罩层的前景色和背景色,可以制作圆形图片等,非常实用。
  悬停
 27066  296

jquery鼠标悬停效果插件

用jquery制作的页面内容鼠标悬停效果的插件
  悬停
 31656  464

css鼠标悬停效果,自适应页面大小

网站常用功能展示,css鼠标悬停效果
  悬停
 9243  162

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

    凉风夜雨然?♂ 1
    2019/11/28 15:41:44

    mTips.s('回调调整提示框位置

    ', 'success ', function(){
    let tipWidth = $(".mTips").width();
    let tipHeight = $(".mTips").height();
    let tipLeft = $(".mTips").position().left;
    let tipTop = $(".mTips").position().top;
    let winWidth = document.body.clientWidth;
    let winHeight = document.body.clientHeight;
    
    let left = tipLeft + mTips.c.x;
    let top = tipTop + mTips.c.y;
    // 如果模块大于页面总宽或高,则重写计算位置
    if (tipLeft + tipWidth > winWidth) {
        left = tipLeft - tipWidth - mTips.c.x * 2;
    }
    if (tipTop + tipHeight > winHeight) {
        top = tipTop - tipHeight - mTips.c.y * 2;
    }
    $(".mTips").offset({
    top: top,
    left: left
    })
    });

    使用时需要在mTips.js 60行处

    $(document).on('mousemove'......{
                ...
                // 添加回调
                if (fun != null && typeof(fun) != 'undefined') {
                    fun();
                }
            }
    回复
    ╁?墨 0
    2019/8/27 16:02:11
    提示能放入图片吗?
        吕纸乔0
        2019/8/29 11:35:10
        可以放入html代码,使用html代码模式
    回复
    yangyanyang 0
    2018/11/29 17:19:14
    自定义样式mTips_? 还是mTips- 回复
    QQ^thunk 0
    2018/5/4 9:01:18
    谢谢作者 ,同时温馨提示再修复下吧,就是当鼠标的位置在页面底部的时候,弹出的层会被遮挡 回复
    莫办蛮、 0
    2018/4/12 16:12:14
    在option上不能用?
    回复
    YSY 0
    2017/12/19 11:05:46
    谢谢作者 又实用又很棒的插件 回复
    zhaowucun13 0
    2017/11/27 16:14:38

    谢谢作者很强大的插件

    回复
    somebody 0
    2017/10/31 9:32:04

    谢谢作者很强大的插件

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