爱了！这个网页气泡提示组件，让你的网站更炫酷！
网页设计师对 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
爱了！这个网页气泡提示组件，让你的网站更炫酷！相关推荐
- idea2020代码el组件红色波浪线_Android实现炫酷的ViewPager3D组件
不知道还有没有人记得风靡于一时的gallery3d组件? 类似于这样的效果: 为什么忽然会提到gallery3d?是因为刚好有需求要做类似效果的页面. 刚把视觉拿到手的时候,首先想到的便是galler ...
- 炫酷3D相册❤ 520七夕情人节表白网页制作❤(HTML+CSS+JavaScript)
师妹直呼"这也太哇塞了吧" ❤520七夕情人节表白网页制作❤(HTML+CSS+JavaScript) 520七夕节告白,也就是中国的情人节,你除了送花你还会什么?? 快来制作高端 ...
- 《安富莱嵌入式周报》第300期：几百种炫酷灯阵玩法, USB Web网页固件升级，波士顿动力整活，并联二极管问题，VisualStudio升级，STM32C0
往期周报汇总地址:嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - P ...
- 数字气泡 php,vue指令如何实现气泡提示（附代码）
本篇文章给大家带来的内容是关于vue指令如何实现气泡提示(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 菜鸟学习之路 //L6zt github 自己 在造组件轮子,也就是 ...
- 气泡提示效果css.html,用纯CSS3绘制高端简约的气泡提示框
用纯css绘制一个简单的气泡提示框,对于长期关注课课家CSS3绘图教程的朋友来说是件轻而易举的事,但是程序员最不喜欢做的事情是重复造轮子,加上之前小编分享的几个气泡要么过于复杂,通用性不强,要么需要鼠 ...
- win10无法打开匿名级安全令牌_打开网页老提示来自网络的消息404 - 卡饭网
电脑打开网页老提示内存不足,怎么解决? 电脑打开网页老提示内存不足,怎么解决? 电脑打开网页老提示内存不足,该怎么解决呢?到底是哪里的问题呢?具体解决步骤如下:1. 右击桌面上的"此电脑&q ...
- 【坚果派-坚果】ArkTS气泡提示
气泡提示 作者:坚果 团队:坚果派 公众号:"大前端之旅" 润开鸿技术专家,华为HDE,InfoQ签约作者,OpenHarmony布道师,擅长HarmonyOS应用开发.熟悉服务卡 ...
- 爱奇艺知识WEB前端组件化实践
组件化作为一种开发模式,其在代码复用,提高开发效率上的效果被广泛认可.组件化思想适用于移动端.Web前端.PC端.TV端等多种类型的客户端和前端开发. 本文主要讲述爱奇艺知识 WEB 前端团队如何结合 ...
- iview ui里面 table表格title提示和气泡提示
iview--table表格title提示和气泡提示 说明: 文本不换行,超出显示省略号,两种提示方式,title提示和气泡提示 气泡提示不足:当内容没超过一行,也会出现气泡提示.觉得不如Elemen ...
最新文章
- Tkinter的Toplevel组件
- 数据结构一【树状数组】普通、二维、离线树状数组的(单点修改，单点查询，区间修改，区间查询)模板及应用例题总结
- 7.2图的存储结构(十字链表、邻接多重表、边集数组)
- excel文件成绩处理python代码_Python处理Excel文件实例代码
- vue click事件传参数_Vue框架之各种指令的使用
- 2019牛客暑期多校训练营（第二场）-D Kth Minimum Clique
- 接口自动化测试框架搭建(6、对接口进行mock的方法封装)--python+HTMLTestRunnerCN+request+unittest+mock+db
- 信息处理技术员下午考试试题分析
- 平面设计个人简历模板
- android 视频编辑应用,安卓视频剪辑软件推荐
- 什么是ISBN码及如何制作
- Turtlebot3-burger入门教程#foxy版#-树莓派4安装
- web前端能做到多少岁？2年能发展到前端技术大牛吗?
- Kubernetes 3年生产中我们所学到的东西
- android通过代码设置铃声_更接地气的定制 ROM，还有哪些特性可以向原生 Android 借鉴？
- Batch Normation
- 特征选择 - 逐步回归 (stepwise regression)
- 织梦CMS如何搬家并成功连接数据库
- Numeric Keypad
- 一个程序员的晋升之路