Tooltip — Tooltip UI Component Reference
Quick-reference skill for tooltip design, positioning logic, accessibility, and implementation patterns.
When to Use
- - Adding contextual help text to UI elements
- Implementing hover/focus information overlays
- Choosing between tooltips, popovers, and toggletips
- Making tooltips accessible to keyboard and screen reader users
- Handling tooltip positioning and collision detection
Commands
intro
CODEBLOCK0
Tooltip overview — types, when to use, tooltip vs popover vs toggletip.
anatomy
CODEBLOCK1
Tooltip anatomy — trigger, content, arrow, positioning, delay.
positioning
CODEBLOCK2
Positioning logic — placement options, collision detection, flip and shift.
accessibility
CODEBLOCK3
Accessibility — ARIA patterns, keyboard support, screen readers, touch devices.
triggers
CODEBLOCK4
Trigger patterns — hover, focus, click, long-press, programmatic.
content
CODEBLOCK5
Content guidelines — what belongs in tooltips, writing style, rich content.
css
CODEBLOCK6
CSS implementation — positioning, animations, arrow rendering, theming.
checklist
CODEBLOCK7
Tooltip design and implementation checklist.
help
CODEBLOCK8
version
CODEBLOCK9
Powered by BytesAgain | bytesagain.com | hello@bytesagain.com
Tooltip — Tooltip UI组件参考
用于tooltip设计、定位逻辑、无障碍访问及实现模式的快速参考技能。
使用场景
- - 为UI元素添加上下文帮助文本
- 实现悬停/聚焦信息覆盖层
- 在tooltip、popover和toggletip之间进行选择
- 使tooltip对键盘和屏幕阅读器用户可访问
- 处理tooltip定位和碰撞检测
命令
intro
bash
scripts/script.sh intro
Tooltip概述 — 类型、使用场景、tooltip vs popover vs toggletip。
anatomy
bash
scripts/script.sh anatomy
Tooltip结构 — 触发器、内容、箭头、定位、延迟。
positioning
bash
scripts/script.sh positioning
定位逻辑 — 放置选项、碰撞检测、翻转和移位。
accessibility
bash
scripts/script.sh accessibility
无障碍访问 — ARIA模式、键盘支持、屏幕阅读器、触控设备。
triggers
bash
scripts/script.sh triggers
触发模式 — 悬停、聚焦、点击、长按、程序化触发。
content
bash
scripts/script.sh content
内容指南 — tooltip中应包含的内容、写作风格、富内容。
css
bash
scripts/script.sh css
CSS实现 — 定位、动画、箭头渲染、主题定制。
checklist
bash
scripts/script.sh checklist
Tooltip设计与实现检查清单。
help
bash
scripts/script.sh help
version
bash
scripts/script.sh version
由BytesAgain提供 | bytesagain.com | hello@bytesagain.com