平时的项目中大家对于鼠标经过效果应该很熟悉，这种效果虽然可以直接用简单的 css hover来实现，但是如果想要更有互动性的、灵活的效果，就需要借助js来实现。今天给大家分享一款干货，tippy.js。里面包含多种提示信息用法以及样式而且是轻量级的。

网址：https://atomiks.github.io/tippyjs

截图演示：

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

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

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

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

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

使用教程

第1步：引入 JS 插件

第2步：HTML代码

第3步：指定要执行的js效果的元素

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

         结果

大家有时间可以去研究一下这个js,如果以后遇到 带有好看的tootips 提示样式的设计图，就不用直接用平凡的hover了，大家可以试试这个插件。

项目设计    供稿