鼠标工具提示js库V0.2

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

 6916  71  查看评论 (5)
鼠标工具提示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_作为前缀,以免和其他样式混合,并且在传入样式类名的时候不需要将前缀传入。

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

纯css3鼠标悬停hover按钮动画事件插件

css3 transition属性制作多种按钮悬停动画特效,css3悬停按钮、CSS3过渡效果、CSS3点击按钮过渡效果
  悬停
 8467  221

canvas鼠标追随效果

canvas鼠标追随粒子放射效果
  悬停
 9043  83

鼠标hover效果(原创)

30种鼠标触碰按钮添加背景样式的效果~
  悬停
 11844  289

数十次css3鼠标悬停特效

鼠标移上去,界面显示的多种方式,各种css3动画
  悬停
 13468  443

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币

    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

    谢谢作者很强大的插件

    回复
取消回复