重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

Tippy.js工具怎么安装使用-创新互联

本篇文章给大家分享的是有关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工具怎么安装使用-创新互联
网站链接:http://cqcxhl.com/article/ipdds.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP