jQuery带动画效果的Tooltips插件

最新推荐文章于 2025-03-17 10:55:19 发布

hinihaoaaa

最新推荐文章于 2025-03-17 10:55:19 发布

阅读量329

点赞数 5

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/w178191520/article/details/144483011

版权

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');