Tooltip

提供前端 Tooltip 组件的设计与实现指南，涵盖定位、可访问性及触发模式。

已扫描

项目

内容

适合谁

前端开发者、UI/UX 设计师

不适合谁

无前端开发经验者、非 Web 界面开发人员

国内可用性

国内友好。面向国内用户较友好。

安装难度

新手友好（★☆☆）。基于终端操作、依赖、API Key 和本地环境要求的初步判断。

安装与下载

复制命令安装

openclaw skills install @xueyetianya/tooltip

官方 ZIP下载官方 ZIP

Skill 说明

命令、参数、文件名以原文为准

用于快速查阅 Tooltip 设计、定位逻辑、可访问性及实现模式的参考技能。

何时使用

为 UI 元素添加上下文帮助文本
实现悬停/聚焦时的信息提示层
在 Tooltip、Popover 和 ToggleTip 之间进行选择
确保 Tooltip 对键盘用户和屏幕阅读器用户可访问
处理 Tooltip 的定位与碰撞检测

命令

`intro`

scripts/script.sh intro

Tooltip 概览 — 类型、适用场景，以及 Tooltip 与 Popover、ToggleTip 的区别。

`anatomy`

scripts/script.sh anatomy

Tooltip 构成 — 触发器、内容、箭头、定位方式、延迟时间。

`positioning`

scripts/script.sh positioning

定位逻辑 — 放置选项、碰撞检测、翻转（flip）与偏移（shift）。

`accessibility`

scripts/script.sh accessibility

可访问性 — ARIA 模式、键盘支持、屏幕阅读器兼容性、触控设备适配。

`triggers`

scripts/script.sh triggers

触发模式 — 悬停、聚焦、点击、长按、程序化触发。

`content`

scripts/script.sh content

内容规范 — 适合放入 Tooltip 的内容、撰写风格、富文本支持。

`css`

scripts/script.sh css

CSS 实现 — 定位方式、动画效果、箭头绘制、主题样式。

`checklist`

scripts/script.sh checklist

Tooltip 设计与实现检查清单。

`help`

scripts/script.sh help

`version`

scripts/script.sh version

*由 BytesAgain 提供 | bytesagain.com | hello@bytesagain.com*

@xueyetianya

已收录 4 个 Skill