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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!