Tooltip

Features

• Bare, chrome-free layout — five real action buttons (copy, edit, share, archive, delete) floating on the canvas
• Four placements demonstrated in context — left, top, bottom and right tips on one row
• Appears on pointer hover AND on keyboard focus for full accessibility parity
• Directional arrow built with CSS borders that points back at the trigger
• Wired with aria-describedby so assistive technology announces the tip text
• Fade-and-scale entrance animated purely with transform and opacity
• Escape and blur dismiss the active tooltip without leaving stray state
• Own Porcelain Teal design system plus accent-aware tips that follow any selected design system
• Fully respects prefers-reduced-motion

Accessibility

Tooltip role

Each tip uses role="tooltip" and a stable id

Describedby wiring

Each trigger sets aria-describedby pointing at its tip

Keyboard reveal

Tips show on focus and hide on blur, matching hover behaviour

Escape dismiss

Escape hides the active tooltip and blurs the trigger

Focus indicators

:focus-visible with --ring outline on all interactive elements

Theme toggle

role="switch" with aria-checked toggled by JS

Reduced motion

prefers-reduced-motion: reduce disables all transitions

Customise it with AI

Open Tooltip in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the popover is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.