jQuery带动画效果的Tooltips插件

当前位置:主页 > jQuery库 > 工具提示 > jQuery带动画效果的Tooltips插件
jQuery带动画效果的Tooltips插件
分享:

    插件介绍

    tooltipify.js是一款带动画效果的jQuery Tooltips插件。该插件可以定制tooltips的方向,出现动画,透明度等属性,使用方便,效果炫酷。

    浏览器兼容性

    浏览器兼容性
    时间:2019-04-24
    阅读:
简要教程

tooltipify.js是一款带动画效果的jQuery Tooltips插件。该插件可以定制tooltips的方向,出现动画,透明度等属性,使用方便,效果炫酷。

安装

// npm
npm install jquery-tooltipify

// Import the module:
import "jquery-tooltipify";

// scss
import "jquery-tooltipify/src/tooltipify.scss";

// css
import "jquery-tooltipify/lib/tooltipify.css";
                

使用方法

初始化插件
$(".tooltips").tooltipify();
                

配置参数

tooltipify.js可用的配置参数有:

  • animationDuration:动画的持续时间,单位毫秒,默认值100。
  • animationOffset:设置动画的偏移,默认为50。
  • animationProperty:动画的选项,设置为空时,tooltips出现不带动画。默认值为left
  • content:tooltip的内容,可以是html标签。
  • cssClass:tooltips容器的class类。
  • displayAware:设置是否在出现方向上空间不足时,tooltips自动出现在反方向上。
  • hideEvent:设置隐藏tooltip的事件,默认为mouseout
  • offsetLeft:设置左偏移量,默认为0。
  • offsetTop:设置上偏移量,默认为0。
  • opacity:设置透明度,默认为0.8。
  • position:设置tooltip的位置,默认为top,可选择有:"top", "left", "right", "bottom"。
  • showEvent:设置显示tooltip的事件,默认为mouseover
  • width:设置tooltip的宽度。

事件

  • hide:隐藏tooltips。
    $(".tooltips").tooltipify('hide');
                    
  • show:显示tooltips。
    $(".tooltips").tooltipify('show');
                    
  • destroy:销毁tooltips。
    $(".tooltips").tooltipify('destroy');
                    

tooltipify.js插件的github网址为:https://github.com/vincentkeizer/tooltipify

下一篇:没有了
贵州快3

免责声明: 本站资料及图片来源互联网文章,本网不承担任何由内容信息所引起的争议和法律责任。所有作品版权归原创作者所有,与本站立场无关,如用户分享不慎侵犯了您的权益,请联系我们告知,我们将做删除处理!