网页设计师对 tooltips 鼠标经过提示效果应该不陌生,这种效果虽然可以直接用 css hover 来实现,但是如果想更友好的、更美观的效果,可能就要借助 JS 来实现。今天和大家分享的 Tippy.js 就是很不错的鼠标悬念插件,多种提示信息用法及样式,并且是轻量级哦。
Tippy.js是一款轻量级的纯js tooltip工具提示插件。tooltip插件功能强大,提供多种动画效果和主题效果,并允许用户自定义tooltip主题和使用html代码作为tooltip的模板。
截图演示
鼠标经过最基本的效果
![36462e42cd6d140fcd8184147b5181e6.gif](https://i-blog.csdnimg.cn/blog_migrate/350a501b9b7d07873b6cc1f72ef9b357.gif)
如果你想设备不同的方向也是可以的,比如上、下、左、右
![1efd1fa776882db4b4fb82d81514d543.gif](https://i-blog.csdnimg.cn/blog_migrate/df38b521211ad39f95bb82586f0daf30.gif)
也可以加入箭头样式,让提示更加清晰
![267cad13a253fe9850cd7caebc19cc0a.gif](https://i-blog.csdnimg.cn/blog_migrate/b3c8f58f67130b3231b05cf0f5b6601a.gif)
可以给tooltips提示效果加入动画效果,这里只展示了一小部分
![544afd8446e1c54dddc3a999b313a643.gif](https://i-blog.csdnimg.cn/blog_migrate/4649cb3c64eb6827de19d266f24d97ea.gif)
提示效果还能加样式的
![16f5385062c9588f9cf2fb0c66d30fe6.gif](https://i-blog.csdnimg.cn/blog_migrate/bddeed6b2b8d1993b460ec35e1726221.gif)
还能在提示框里加入 HTML 元素
![5b7f18902ea6ce8ee3dde33bddbb62c6.gif](https://i-blog.csdnimg.cn/blog_migrate/fb268bead799f1d9b0a8e253ba79dffe.gif)
其它效果
![c40c486c41be64dcde73be2788ae0c9c.gif](https://i-blog.csdnimg.cn/blog_migrate/31b70bda0401f85abdb947afd3337af4.gif)
安装
npm安装Tippy.js插件
# npm
npm i tippy.js
# Yarn
yarn add tippy.js
导入文件:
import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';
外部引用
使用说明
Tippy.js 在 github 开源,可以自由下载学习和免费使用,包括商用。这是独立组件中非常不错的一个小组件,祝各位搬砖愉快。
结尾
本期就分享到这里,我是小编南风吹,专注分享好玩有趣、新奇、实用的开源项目及开发者工具、学习资源!希望能与大家共同学习交流,欢迎关注我的公众号**【Github导航站】**。
![]()
111
往期推荐
往期推荐
掌握这6个可视化图表,小白也能轻松玩转数据分析
我为什么选择React而不选择Vue?
太漂亮了!有了3款开源图标库,不用再去求设计师了
太漂亮了!有了这9款前端CSS开源框架,经理不再说我做得丑了!
10个相见恨晚的vue.js库!用好了,事半功倍!