前端UI组件【免费下载链接】balloon.cssSimple tooltips made of pure CSS项目地址https://gitcode.com/gh_mirrors/ba/balloon.css点击查看免费下载Balloon.css 是一个以纯 CSS 实现 Tooltip为核心理念的轻量级开源库它不依赖任何 JavaScript只要在元素上添加aria-label与data-balloon-pos属性就能获得带箭头、带动画的悬浮提示气泡。本文将以仓库 readme.md 为主体脉络结合 src/balloon.scss、src/_mixins.scss、src/_variables.scss 等源码与 test.html 演示页完整讲解安装引入、八个方向定位、程序化显示、动画控制、CSS 变量定制、富文本内容以及底层的伪元素与边框箭头实现原理让你既能直接上手也能深入理解其工作机制。Balloon.css 是什么Balloon.css 的核心卖点正如项目描述所写——Simple tooltips made of pure CSS纯 CSS 制作的简单提示气泡。它具备以下显著特点完全不需要 JavaScript提示的显示、隐藏、定位、动画全部由 CSS 完成只是给元素打上aria-label和data-balloon-pos两个属性体积极小根据 readme 说明minified 压缩后仅约1.1KBBrotli 压缩后直接复用无障碍属性提示文字取自aria-label兼顾了屏幕阅读器语义MIT 协议开源仓库根目录提供 LICENSE 文件当前仓库对应版本为1.2.0见 package.json。它的适用场景非常典型按钮、图标、链接等元素上的简短解释说明在悬停hover或聚焦focus时弹出无需为这一小功能引入动辄几十 KB 的 JS 工具库。快速安装与引入方式一npm 安装npm install balloon-css安装后有两种引入方式。第一种是直接在 JS 入口中引入打包好的 CSS适用于 Webpack 等打包器// Your index.js file, etc. import balloon-css;第二种是在使用 SASS/SCSS 的项目中引入源码注意这里的src/balloon指向的是 src/balloon.scss/* Your main.scss file, etc. */ import ~balloon-css/src/balloon方式二CDN 引入如果不使用 npm可以直接用 unpkg 的 CDN 版本该地址始终指向最新版本!-- This link will always fetch the latest version of Balloon.css -- link relstylesheet hrefhttps://unpkg.com/balloon-css/balloon.min.css方式三手动下载从本仓库下载构建产物 balloon.min.css或未压缩的 balloon.css放到项目目录后引入link relstylesheet hrefpath/to/balloon.min.css提示balloon.css与balloon.min.css都是通过node-sass从 SASS 源码构建出来的生成文件参见 package.json 中的build脚本两者内容一致仅压缩程度不同日常使用引入任一个即可。基础用法用>button aria-labelWhats up!>[data-balloon-pos^up] { :before, :after { bottom: 100%; transform-origin: top; transform: translate(0, var(--balloon-move)); } :after { margin-bottom: $balloon-arrow-size 5px; } }程序化显示data-balloon-visible默认情况下提示只在:hover或:focus时出现但如果你希望在没有用户交互时也显示提示例如引导新手、默认展示某项说明可以给元素添加data-balloon-visible属性button aria-labelWhats up!>:hover, [data-balloon-visible], :not([data-balloon-nofocus]):focus { :before, :after { opacity: 1; pointer-events: none; } }注意这里还隐藏了一个配套特性如果只想让提示在 hover 时显示、不希望聚焦focus也触发可以在元素上添加data-balloon-nofocus属性它是 readme 未展开说明、但源码明确支持的细节能力。pointer-events: none保证气泡本体不会拦截鼠标事件。禁用动画data-balloon-blunt如果某些场景不需要过渡动画例如追求极简、或在特定布局下动画会引起跳动只需添加data-balloon-blunt属性button>/* Add this to your CSS */ .tooltip-red { --balloon-color: red; } .tooltip-big-text { --balloon-font-size: 20px; } .tooltip-slide { --balloon-move: 30px; }配合 HTMLbutton aria-labelI am red!>/* All tooltips would now be square and blue */ :root { --balloon-border-radius: 0; --balloon-color: blue; }由于 CSS 变量具备继承特性在任意中间容器上声明同样会生效——这也意味着你可以为某个页面区块整体换肤而无需逐元素打类名。富文本内容HTML 字符、Emoji 与图标字体提示文字取自aria-label因此理论上可以放入任意 HTML 实体字符甚至 Emojibutton aria-labelHTML special characters: #9787; #9986; #9820;>button classfa aria-labelFont Awesome: #xf030; #xf133; #xf1fc; #xf03e; #xf1f8;>.font-awesome:after { font-family: FontAwesome, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif; }在 test.html 的 Glyphs and Icon Fonts 演示段中可以看到对应的完整示例。源码级进阶长文本、换行与更多隐藏属性readme 主要面向基础使用但源码中还包含一批隐藏能力可以在不引入任何新依赖的情况下解决长文本场景data-balloon-length控制气泡宽度默认气泡是white-space: nowrap单行显示的过长的文本会撑爆布局。data-balloon-length提供 5 档固定宽度见 src/balloon.scss取值气泡宽度small80pxmedium150pxlarge260pxxlarge380px屏幕宽度 ≤ 768px 时自动降为90vwfit100%撑满宿主元素宽度button>[data-balloon-break] { :after { white-space: pre; } [data-balloon-length] { :after { white-space: pre-line; word-break: break-word; } } }无障碍与兼容性细节源码中还包含了三个看不见但很有用的处理键盘可达性[aria-label][data-balloon-pos]在获得焦点:focus时同样显示气泡除非加了data-balloon-nofocus键盘用户也能获得提示IE 11 修复button[aria-label][data-balloon-pos] { overflow: visible; }专门修复 IE 11 中按钮默认样式导致气泡被裁剪的问题src/balloon.scssiOS Safari 修复为带提示的元素设置cursor: pointer规避 iOS Safari 上点击事件无法触发的问题源码注释中给出了原由。工作原理纯 CSS 的秘密整个库的实现只依赖一个属性选择器和两个伪元素这是它体积能做到 1.1KB 的根本原因。1. 内容来源attr(aria-label)。气泡正文由::after伪元素承载其content直接取用宿主元素的aria-labelsrc/balloon.scss因此 HTML 结构零冗余:after { include base-effects(); include normalized-text(); background: var(--balloon-color); border-radius: var(--balloon-border-radius); content: attr(aria-label); padding: .5em 1em; position: absolute; white-space: nowrap; z-index: 10; }2. 箭头经典边框三角形。箭头由::before承载借助arrow($direction)mixinsrc/_mixins.scss生成把元素宽高设为 0设置 5px 的透明边框再单独给某一侧上色就形成了指向任意方向的三角形。方向与着色边的映射关系用 Sass Map 维护$ARROW_DIRECTIONS: ( down: top, up: bottom, left: right, right: left, ); mixin arrow($direction) { if not map-has-key($ARROW_DIRECTIONS, $direction) { error [balloon] The $direction parameter must be one of: ...; } width: 0; height: 0; border: $balloon-arrow-size solid transparent; border-#{map-get($ARROW_DIRECTIONS, $direction)}-color: var(--balloon-color); }比如上方位置的气泡箭头着色边是top箭头朝上down位置则调用arrow(up)着色边是bottom箭头朝下。箭头与气泡背景统一使用var(--balloon-color)保证换色时两者始终一致。3. 动画透明度过过渡 位移。base-effects()mixinsrc/_mixins.scss为气泡和箭头统一设置初始opacity: 0、pointer-events: none并以0.18s ease-out 0.18s过渡透明度和位移显示时位移量由--balloon-move变量控制不同方向用translate/calc(var(--balloon-move) * -1)处理正向与反向滑动形成浮现 滑入的柔和动效。4. 整体接线。宿主元素只需position: relative气泡与箭头绝对定位在它周围配合各方向的left/right/top/bottom与margin箭头尺寸 5px 间距完成贴合。整个逻辑串联在 src/balloon.scss 这一份文件中结构非常清晰。本地演示与测试仓库根目录自带了 test.html它引入本地balloon.min.css并覆盖了所有核心能力的分节演示Positioning8 个方向逐一展示Lengthsmall/medium/large/xlarge/fit五档宽度对比Disabling animationdata-balloon-blunt示例Showing tooltips programaticallydata-balloon-visible示例Customizing Tooltips.tooltip-red、.tooltip-big-text、.tooltip-slide三个定制类示例Glyphs and Icon Fonts特殊字符、Emoji 与 Font Awesome 示例。克隆仓库后直接用浏览器打开该文件或配合本地静态服务器访问即可在一个页面里完整验证本文涉及的全部特性。参与贡献与构建流程Balloon.css 的源码以 SASS.scss维护readme 给出如下开发流程克隆仓库git clone https://github.com/kazzkiq/balloon.css.git安装依赖npm install修改 SASS 源码后执行npm run build生成生产环境 CSS在网站gh-pages分支上验证生成文件无误后再提交 Pull Request。需要特别留意的是 readme 中的两条注意点务必修改 SASS 源码即 src/balloon.scss 及其引入的 _variables.scss、_mixins.scss而不是直接改生成的balloon.css/balloon.min.css——因为它们在每次构建时都会被覆盖构建命令定义在 package.json 中scripts: { build: node-sass src/balloon.scss ./balloon.css node-sass src/balloon.scss ./balloon.min.css --output-style compressed, prepublishOnly: npm run build }即先用node-sass生成未压缩版再用--output-style compressed生成压缩版开发依赖为node-sass ^4.14。小结Balloon.css 用极小的代价约 1.1KB minified Brotli、零 JavaScript解决了 Web 开发中高频的 Tooltip 需求data-balloon-pos负责 8 向定位data-balloon-visible支持程序化常显data-balloon-blunt一键去动画CSS 变量体系覆盖颜色、字号、圆角与位移的定制data-balloon-length/data-balloon-break则补齐了长文本场景。配合 src/balloon.scss 中::after气泡 ::before箭头 attr(aria-label)内容的精简实现你可以快速把它接入现有项目也能在需要时读懂并二次定制它。赞分享前端UI组件【免费下载链接】balloon.cssSimple tooltips made of pure CSS项目地址https://gitcode.com/gh_mirrors/ba/balloon.css点击查看免费下载相关推荐纯CSS工具提示实现无需JavaScript的悬浮提示框终极指南纯CSS工具提示实现无需JavaScript的悬浮提示框终极指南 你是否曾经想过不写一行JavaScript代码也能实现漂亮的悬浮提示框 在 You前端示例工程You-Dont-Need-JavaScript工具提示纯CSS实现信息提示气泡的完整指南You Dont Need JavaScript工具提示纯CSS实现信息提示气泡的完整指南 还在为网页添加JavaScript工具提示而烦恼吗 You前端示例工程Mermaid Live Editor免费在线图表编辑器的5分钟快速上手指南Mermaid Live Editor免费在线图表编辑器的5分钟快速上手指南 还在为复杂的图表制作工具而烦恼吗想要一个简单、免费且功能强大的图表编辑器吗前端开发者工具数据可视化上一篇SpotiFLAC下载文件质量验证使用专业工具检测FLAC文件的真实性下一篇解决Ant Design Pro v6安装依赖失败及空白页面问题创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考