1，基本介绍
（1）tippy.js 是一款轻量的 tooltip 插件，使用它可以很方便地实现鼠标悬停提示信息效果。
（2）tippy.js 使用简单，扩展性好，提供多种动画效果和主题效果，并允许用户自定义 tooltip 主题和使用 html 代码作为 tooltip 的模板。
2，安装配置
（1）首先将最新的 tippy.all.js 和 tippy.css 这两个文件下载到本地。
（2）然后在页面中将它们引入进来即可：
|
1
2
|
<link rel="stylesheet"href="tippy.css"><script src='tippy.all.js'></script> |
二、基本用法
1，在标签上设置提示文字，并自动初始化
（1）我们可以对任何需要显示 tooltip 的元素标签上使用 data-tippy 属性设置提示文字，当鼠标移动到这个元素上时，则会自动显示出提示信息。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet"href="tippy.css"> <script src='tippy.all.js'></script> </head> <body style="padding:70px"> <button data-tippy="欢迎访问hangge.com!">自动触发</button> </body></html> |
（2）效果图
- 当鼠标移动到按钮上时，按钮上方会自动显示出提示信息。
- 当鼠标移出时，提示信息又会自动消失。
- 在提示信息显示、隐藏过程中，还会有淡入淡出的效果。
原文出自：www.hangge.com 转载请保留原文链接：https://www.hangge.com/blog/cache/detail_2188.html
浙公网安备 33010602011771号