爱了！这个网页气泡提示组件，让你的网站更炫酷！

码农天地 - 2020-12-28 08:00:14

---

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

  Tippy.js是一款轻量级的纯js tooltip工具提示插件。tooltip插件功能强大，提供多种动画效果和主题效果，并允许用户自定义tooltip主题和使用html代码作为tooltip的模板。

截图演示

鼠标经过最基本的效果

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

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

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

提示效果还能加样式的

还能在提示框里加入 HTML 元素

其它效果

安装

npm安装Tippy.js插件

# npm
npm i tippy.js

# Yarn
yarn add tippy.js

导入文件:

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

外部引用

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

使用说明

  Tippy.js 在 github 开源，可以自由下载学习和免费使用，包括商用。这是独立组件中非常不错的一个小组件，祝各位搬砖愉快。

结尾本期就分享到这里，我是小编南风吹，专注分享好玩有趣、新奇、实用的开源项目及开发者工具、学习资源！
希望能与大家共同学习交流,欢迎关注我的公众号【Github导航站】。

往期推荐

太漂亮了！有了3款开源图标库，不用再去求设计师了

10个相见恨晚的vue.js库！用好了，事半功倍！

太及时了！13个Spring Boot练手项目,用好了，升职涨薪不用愁

程序员接私活必备后台框架，不用重复造轮子，网友：太好用了！

还在从头到尾撸项目？这6个SpringBoot项目用好了，事半功倍！

「00后缩写黑话翻译器」登上GitHub热榜，中年网民终于能看懂年轻人的awsl

Tags 标签