Tooltip

---

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 intro

Tooltip overview — types, when to use, tooltip vs popover vs toggletip.

anatomy

scripts/script.sh anatomy

Tooltip anatomy — trigger, content, arrow, positioning, delay.

positioning

scripts/script.sh positioning

Positioning logic — placement options, collision detection, flip and shift.

accessibility

scripts/script.sh accessibility

Accessibility — ARIA patterns, keyboard support, screen readers, touch devices.

triggers

scripts/script.sh triggers

Trigger patterns — hover, focus, click, long-press, programmatic.

content

scripts/script.sh content

Content guidelines — what belongs in tooltips, writing style, rich content.

css

scripts/script.sh css

CSS implementation — positioning, animations, arrow rendering, theming.

checklist

scripts/script.sh checklist

Tooltip design and implementation checklist.

help

scripts/script.sh help

version

scripts/script.sh version

---

*Powered by BytesAgain | bytesagain.com | hello@bytesagain.com*