前端轻量级的toolTip插件-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。

newTippy('.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对象时以对象的方式传入配置参数，例如：

newTippy('.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个可用的回调函数：

newTippy('.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
  }
})

官方GitHub : https://github.com/atomiks/tippyjs

前端轻量级的toolTip插件-Tippy.js

使用方法

HTML结构

初始化插件

配置参数

事件

猜你喜欢