本篇文章给大家分享的是有关Tippy.js工具怎么安装使用，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
员工经过长期磨合与沉淀，具备了协作精神，得以通过团队的力量开发出优质的产品。
创新互联坚持“专注、创新、易用”的产品理念，因为“专注所以专业、创新互联网站所以易用所以简单”。公司专注于为企业提供
成都网站设计、成都网站制作、微信公众号开发、电商网站开发，
小程序制作，软件专业公司等一站式互联网企业服务。
Tippy.js是一款轻量的tooltip插件，使用简单，扩展性好。该tooltip插件功能强大，提供多种动画效果和主题效果，并允许用户自定义tooltip主题和使用html代码作为tooltip的模板。
安装
可以通过npm来安装在Tippy.js插件。
tippy('#linka', { html: '#myTemplate', arrow: true, animation: 'fade', distance: 15, arrowTransform: 'scale(2)'});
选项设置
我们可以在实例化Tippy对象时以对象的方式传入配置参数，例如：
tippy('.tippy', { position: 'right', animation: 'fade' })
也可以在HTML中直接以data-*的方式来使用配置参数：
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工具怎么安装使用，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
分享题目：Tippy.js工具怎么安装使用-创新互联
URL标题：
http://www.cdkjz.cn/article/ipdds.html
