Tippy.js是一款轻量的tooltip插件,使用简单,扩展性好。该tooltip插件功能强大,提供多种动画效果和主题效果,并允许用户自定义tooltip主题和使用html代码作为tooltip的模板。
安装
可以通过npm来安装在Tippy.js插件。
npm install --save tippy.js
知识兔或者直接调用CDN上的js。
<script src="https://unpkg.com/tippy.js@2.2.3/dist/tippy.all.min.js"></script>
知识兔使用
我们需要为使用tooltip的元素设置一个title属性,这个属性中的内容就是tooltip的内容。
<button type="button" class="btn btn-success" title="Tooltip">鼠标滑上试下</button>
<button type="button" class="btn btn-info" title="这里是提示信息">按钮2</button>
<button class="btn btn-warning" title="<strong>文字粗体!</strong>">粗体</button>
知识兔然后直接调用:
tippy('button');
知识兔运行,就可以看到效果。
如果我们要让Tippy支持HTML内容,可以设置关联模板:
<div id="myTemplate" style="display:none">
<p>Fun <strong>non-interactive HTML</strong> here</p>
<img alt="cat" height="150" src="/img/cat.jpg">
</div>
<p><a href="https://zhishitu.com" id="linka">HTML内容</a></p>
知识兔然后这样来调用:
tippy('#linka', {
html: '#myTemplate',
arrow: true,
animation: 'fade',
distance: 15,
arrowTransform: 'scale(2)'
});
知识兔选项设置
我们可以在实例化Tippy对象时以对象的方式传入配置参数,例如:
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 | 指定tooltip出现的位置。可选:'top' 'bottom' 'left' 'right' | 'top' |
trigger | 指定触发tooltip的事件。可选:'mouseenter' 'focus' 'click' 'manual' | 'mouseenter focus' |
delay | 指定多少毫秒之后才显示tooltip。>=0的整数 | 0 |
animation | 指定tooltip的动画类型。可选:'shift' 'perspective' 'fade' 'scale' 'none' | 'shift' |
arrow | 是否在tooltip上显示箭头 | false |
duration | tooltip的持续动画时间,毫秒。 | 400 |
html | 是否允许在tooltip中显示html模板内容。值为false或模板的id | false |
theme | tooltip的主题。可选:'dark' 'light' | 'dark' |
offset | tooltip的偏移值,单位像素。 | 0 |
hideOnClick | 指定是否在悬停后单击其元素时隐藏tooltip。true false | true |
事件方法
Tippy.js提供了5个可用的回调函数:
tippy('.btn', {
onShow() {
// When the tooltip has been triggered and has started to transition in
},
onShown() {
// When the tooltip has fully transitioned in and is showing
},
onHide() {
// When the tooltip has begun to transition out
},
onHidden() {
// When the tooltip has fully transitioned out and is hidden
},
wait(show, event) {
// Delays showing the tooltip until you manually invoke `show()`
}
})
知识兔更多关于Tippy.js tooltip工具提示插件的信息,请参考:https://github.com/atomiks/tippyjs