对话框/Tips
Tippy - 纯 js tooltip 工具提示插件
PetitQ
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}})
关于 Tippy.js tooltip 工具提示插件的更多信息，请参考：https://github.com/atomiks/tippyjs
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
