Tippy.js鼠标悬停提示工具

Tippy.js是一款轻量的tooltip插件，使用简单，扩展性好。该tooltip插件功能强大，提供多种动画效果和主题效果，并允许用户自定义tooltip主题和使用html代码作为tooltip的模板。

安装

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

npm install --save tippy.js  

或者直接调用CDN上的js。

<script src="https://unpkg.com/tippy.js@2.2.3/dist/tippy.all.min.js"></script>

使用

我们需要为使用tooltip的元素设置一个title属性，这个属性中的内容就是tooltip的内容。

<button type="button" class="btn btn-success" title="Tooltip">鼠标滑上试下</button>
<button type="button" class="btn btn-info" title="这里是提示信息">按钮2</button>
<button class="btn btn-warning" title="<strong>文字粗体!</strong>">粗体</button>

然后直接调用：

tippy('button');

运行，就可以看到效果。

如果我们要让Tippy支持HTML内容，可以设置关联模板：

<div id="myTemplate" style="display:none">
  <p>Fun <strong>non-interactive HTML</strong> here</p>
  <img alt="cat" height="150" src="img/cat.jpg">
</div>
<p><a href="#" id="linka">HTML内容</a></p>

然后这样来调用：

tippy('#linka', {
  html: '#myTemplate',
  arrow: true,
  animation: 'fade',
  distance: 15,
  arrowTransform: 'scale(2)'
});

选项设置

我们可以在实例化Tippy对象时以对象的方式传入配置参数，例如：

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	指定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://pan.lanzou.com/i0m3mxa