Tippy.js-纯js tooltip工具提示插件
Tippy.js是一款轻量级的纯js tooltip工具提示插件。该tooltip插件功能强大，提供多种动画效果和主题效果，并允许用户自定义tooltip主题和使用html代码作为tooltip的模板。
 |
使用方法
在页面中引入tippy.js和tippy.css文件。
<link rel="stylesheet" href="css/tippy.css"><script src='path/to/tippy.js'></script> |
HTML结构
你需要为使用tooltip的元素设置一个title属性，这个属性中的内容就是tooltip的内容。
<button class="btn tippy" title="I'm a tooltip!">tooltip测试</button> |
初始化插件
在页面DOM元素加载完毕之后，通过new Tippy()方法来实例化tooltip。
new Tippy('.tippy') |
一个完整的使用tippy.js的HTML文档的结构如下：
<!DOCTYPE html><html> <head> <link rel="stylesheet" href="tippy.css"> </head> <body> <button id="myId" title="Tooltip text">Button text</button> <script src="tippy.js"></script> <script> new Tippy('#myId') </script> </body></html> |
配置参数
你可以在实例化Tippy对象时以对象的方式传入配置参数，例如：
new Tippy('.tippy', { position: 'right', animation: 'fade' }) |
也可以在HTML中直接以data-*的方式来使用配置参数：
<button class="btn tippy" title="I'm a tooltip!" data-animatefill="false" data-animation="scale" data-position="bottom">Overridden</button> |
Tippy.js所有可用的配置参数如下：
| 参数 | 默认值 | 可选值 | 描述 |
| position | 'top' | 'top' 'bottom' 'left' 'right' | 指定tooltip出现的位置。 |
| trigger | 'mouseenter focus' | 'mouseenter' 'focus' 'click' 'manual' | 指定触发tooltip的事件。 |
| interactive | false | true false | toltip是否可互动。 |
| delay | 0 | >=0的整数 | 指定多少毫秒之后才显示tooltip。 |
| animation | 'shift' | 'shift' 'perspective' 'fade' 'scale' 'none' | 指定tooltip的动画类型。 |
| arrow | false | true false | 是否在tooltip上显示箭头。 |
| animateFill | true | true false | 添加material design风格的动画。如果arrow设置为true，该选项无效。 |
| duration | 400 | >=0的整数 | tooltip的持续动画时间。 |
| html | false | false或模板的id | 是否允许在tooltip中显示html模板内容。 |
| theme | 'dark' | 'dark' 'light' | tooltip的主题。 |
| offset | 0 | 任何数值 | tooltip的偏移值，单位像素。 |
| hideOnClick | true | true false | 指定是否在悬停后单击其元素时隐藏tooltip。 |
事件
Tippy.js提供了4个可用的回调函数：
new Tippy('.tippy', { beforeShown: function() { // When the tooltip has been triggered and has started to transition in }, shown: function() { // When the tooltip has fully transitioned in and is showing }, beforeHidden: function() { // When the tooltip has begun to transition out }, hidden: function() { // When the tooltip has fully transitioned out and is hidden }}) |
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！