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

时间 2021-05-26

标签 javascript css html vue java git 程序员 github shell npm 栏目 HTML 繁體版

原文原文链接

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

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

截图演示

鼠标通过最基本的效果html

若是你想设备不一样的方向也是能够的，好比上、下、左、右vue

也能够加入箭头样式，让提示更加清晰java

能够给tooltips提示效果加入动画效果，这里只展现了一小部分git

提示效果还能加样式的程序员

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

其它效果shell

npm安装Tippy.js插件npm

# 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导航站】。