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)效果图
- 当鼠标移动到按钮上时,按钮上方会自动显示出提示信息。
- 当鼠标移出时,提示信息又会自动消失。
- 在提示信息显示、隐藏过程中,还会有淡入淡出的效果。
![原文:tippy.js - 好用的tooltip提示插件使用详解1(安装配置、基本用法、触发方式)](https://www.hangge.com/blog_uploads/201810/2018100120123451983.png)
原文出自: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