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 标签：插件,script,tippy,tooltip,js,提示信息,com From： https://www.cnblogs.com/fireicesion/p/16720686.html