Tippy.js-纯js tooltip工具提示插件

当前位置:主页 > jQuery库 > 工具提示 > Tippy.js-纯js tooltip工具提示插件
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
Tippy.js-纯js tooltip工具提示插件
分享:

    插件介绍

    Tippy.js是一款轻量级的纯js tooltip工具提示插件。该tooltip插件功能强大,提供多种动画效果和主题效果,并允许用户自定义tooltip主题和使用html代码作为tooltip的模板。

    浏览器兼容性

    浏览器兼容性
    时间:2017-04-05
    阅读:
简要教程

Tippy.js是一款轻量级的纯js tooltip工具提示插件。该tooltip插件功能强大,提供多种动画效果和主题效果,并允许用户自定义tooltip主题和使用html代码作为tooltip的模板。

安装

可以通过npm来安装在Tippy.js插件。

npm install --save tippy.js                  
                

使用方法

在页面中引入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

网友评论