Tippy.js 玩转鼠标悬停提示信息

àì夳堔傛蜴生んèń 2021-11-27 00:54 283阅读 0赞

# Tippy.js 玩转鼠标悬停提示信息 #

原文：http://www.shejidaren.com/tippy-js.html

网页设计师对 tooltips 鼠标经过提示效果应该不陌生，这种效果虽然可以直接用 css hover 来实现，但是如果想更友好的、更美观的效果，可能就要借助 JS 来实现啦。今天和大家分享的 Tippy.js 就是很不错的鼠标悬念插件，多种提示信息用法及样式，并且是轻量级哦。

![tooltips 鼠标悬停提示效果][tooltips]

网站名称：Tippy.js  
下载&预览：[https://atomiks.github.io/tippyjs/][https_atomiks.github.io_tippyjs]

### 截图演示 ###

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

![css-tooltips-1.gif][]

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

![css-tooltips-2.gif][]

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

![css-tooltips-3.gif][]

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

![css-tooltips-4.gif][]

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

![css-tooltips-5.gif][]

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

![css-tooltips-6.gif][]

其它效果

![css-tooltips-7.gif][]

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

### 使用教程 ###

第1步：引入 JS 插件

第2步：HTML 代码

<button class="btn" title="I'm a tooltip!">Text</button>
    <button class="btn" title="<strong>I'm a bold tooltip!</strong>">Text</button>

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

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

好了，如果以后需要做好看的 tootips 提示样式，不妨试试这个插件，仅14KB哦！

推荐：查看最受欢迎的 301 个设计网站 →  [http://hao.shejidaren.com][http_hao.shejidaren.com]

转载于:https://www.cnblogs.com/jiangyuzhen/p/10946229.html

[tooltips]: /images/20211126/e0be0a439259464ebacb11ac29db3308.png
[https_atomiks.github.io_tippyjs]: https://atomiks.github.io/tippyjs/
[css-tooltips-1.gif]: /images/20211126/a59f9f2b0f1847aca0764560e3b24824.png
[css-tooltips-2.gif]: /images/20211126/17e381e5b5b14a42a5635b4525dcd66c.png
[css-tooltips-3.gif]: /images/20211126/4e18306e5cbe477380e25522f3f3d78a.png
[css-tooltips-4.gif]: /images/20211126/d4825d37deaa481bb9592e3266330a8d.png
[css-tooltips-5.gif]: /images/20211126/4569dc1eb76f47b0b0f4d42129610841.png
[css-tooltips-6.gif]: /images/20211126/92436be9add844f28743266cc47932f3.png
[css-tooltips-7.gif]: /images/20211126/f8dac89c9aed46948120e9926ae89625.png
[http_hao.shejidaren.com]: http://hao.shejidaren.com/