对于鼠标悬停提示文字大家应用知道有个叫tooltips，但除了这个还有一个样式效果很好的鼠标悬停js插件,这就是国外的一款Tippy.js插件。今天和大家分享的 Tippy.js 就是很不错的鼠标悬念插件，多种提示信息用法及样式，并且是轻量级哦。

开源github地址：https://github.com/atomiks/tippyjs

官方地址：https://atomiks.github.io/tippyjs/


先看下效果演示图


默认：
这是鼠标经过最基本的效果

方向：
如果你想设备不同的方向也是可以的，比如上、下、左、右

箭头样式：
也可以加入箭头样式，让提示更加清晰。

动画：
可以给tooltips提示效果加入动画效果，这里只展示了一小部分

样式：
提示效果还能加样式的哦，你看：

HTML 样式：
还能 在提示框里加入 HTML 元素。

其它效果

达人只截取图一部分截图，官方网页还有更多的演示和详细使用教程哦！


使用教程：

包安装方法

# npm
npm i tippy.js

# Yarn
yarn add tippy.js

安装后，模块化引入方式

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css'; // optional for styling

CDN引用

<!-- Development -->
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>

<!-- Production -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

将它们放在的最底部<body>，确保将它们放在您自己的脚本之前。后面的版本号@很重要，请确保不要将其删除。

注意

CSS会自动插入<head>CDN（tippy-bundle）中。启用CSP后，您可能需要单独链接 dist/tippy.css和使用dist/tippy.umd.min.js。

html用法：

<html>
  <head>
    <title>Tippy</title>
  </head>
  <body>
    <button id="myButton">My button</button>

    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script src="https://unpkg.com/tippy.js@6"></script>
    <script>
      // With the above scripts loaded, you can call `tippy()` with a CSS
      // selector and a `content` prop:
      tippy('#myButton', {
        content: 'My tooltip!',
      });
    </script>
  </body>
</html>

额外选项：你可以为这个元素增加一些动画效果，更多参数请参考官网哦。

<script>
tippy('.btn', {
  placement: 'right',
  animation: 'scale',
  duration: 1000,
  arrow: true
})
</script>