爱了!这个网页气泡提示组件,让你的网站更炫酷!
网页设计师对 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 ...
最新文章
- 当谈论设备指纹时,我们到底在说什么?(转)
- 1 张图,拆解阿里 P8高级架构师必会技术栈!
- 在android上面让TextView 过多的文字实现有滚动条 scrollview
- asp.net mysql打包_Asp.net与SQL一起打包部署安装
- using用法是什么?
- 在博客里轻松使用LaTeX 数学公式[转]
- linux配置防火墙,开启端口
- linux module_init
- CentOS7的初始配置
- -lavutil -lavcodec -lavdevice -lavfilter -lavformat链接失败,换用-lffmpeg
- 浅析单调递增子序列问题(LIS)
- 活学活用pic单片机c语言编程pdf,活学活用PIC单片机C语言编程
- 2017年十大移动应用开发的测试工具
- 基于SRS的视频直播服务器搭建
- Android SDK是什么
- png转bmp,png批量转成bmp
- Mac下显示网页全屏快捷键
- 一种基于暗通道先验算法的图像去雾技术研究
- NOI系列活动标准竞赛环境(2016年11月08日更新)
- ORA-01722:无效数字
热门文章
- 【el-dialog + video】控制视频弹框的显示与隐藏
- 抖音表情包项目怎么变现?普通人如何制作表情包短视频月入过万?
- 海龟交易法则(策略源码)
- MKS TinyBee V1.0使用说明书
- 风险投资(VC)与私募股权投资(PE)的区别
- 网络设计部分知识点总结
- Task 05:样式色彩秀芳华
- 融合办公时代来了?联想Filez带你正确解读“融合办公”新模式
- C++设计模式——模板方法模式(高屋建瓴)
- 笔记本如何选择修复计算机,详细教你笔记本电脑无线网卡修复