安装
可以通过npm来安装在Tippy.js插件。
npm install --save tippy.js
或者直接调用CDN上的js。
使用
我们需要为使用tooltip的元素设置一个title属性，这个属性中的内容就是tooltip的内容。
鼠标滑上试下
按钮2
文字粗体!">粗体
然后直接调用：
tippy(\'button\');
运行，就可以看到效果。
如果我们要让Tippy支持HTML内容，可以设置关联模板：
Fun non-interactive HTML here
HTML内容
然后这样来调用：
tippy(\'#linka\', {
html: \'#myTemplate\',
arrow: true,
animation: \'fade\',
distance: 15,
arrowTransform: \'scale(2)\'
});选项设置
我们可以在实例化Tippy对象时以对象的方式传入配置参数，例如：
tippy(\'.tippy\', { position: \'right\', animation: \'fade\' })也可以在HTML中直接以data-*的方式来使用配置参数：
Overridden
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
本文地址：https://www.stayed.cn/item/85
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
