- name
- tooltip
- version
- 1.0.0
- description
- Tooltip UI component reference — positioning, accessibility, trigger patterns, animation. Use when implementing tooltips, popovers, or contextual help overlays in web interfaces.
- author
- BytesAgain
- homepage
- https://bytesagain.com
- source
- https://github.com/bytesagain/ai-skills
- tags
- [tooltip, popover, ui-component, a11y, positioning, overlay, frontend]
- category
- frontend
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
scripts/script.sh introTooltip overview — types, when to use, tooltip vs popover vs toggletip.
anatomy
scripts/script.sh anatomyTooltip anatomy — trigger, content, arrow, positioning, delay.
positioning
scripts/script.sh positioningPositioning logic — placement options, collision detection, flip and shift.
accessibility
scripts/script.sh accessibilityAccessibility — ARIA patterns, keyboard support, screen readers, touch devices.
triggers
scripts/script.sh triggersTrigger patterns — hover, focus, click, long-press, programmatic.
content
scripts/script.sh contentContent guidelines — what belongs in tooltips, writing style, rich content.
css
scripts/script.sh cssCSS implementation — positioning, animations, arrow rendering, theming.
checklist
scripts/script.sh checklistTooltip design and implementation checklist.
help
scripts/script.sh helpversion
scripts/script.sh version*Powered by BytesAgain | bytesagain.com | hello@bytesagain.com*