UI Skillbook
2

Tooltip

Brief text shown on hover or focus that names or explains a control, for example an icon button.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-tooltip and follow the Siteplane Tooltip skill it prints for this task.

Paste this into your agent.

Tooltip names icon buttons or adds a brief, optional explanation to a control. It appears on hover and keyboard focus. Put essential information in the page as well.

Install

bashnpx shadcn@4.18.0 add @siteplane/tooltip

Import it from @/siteplane/components/tooltip. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Popover: Pick Popover instead when the content is interactive or must open on tap.
  • vs Preview Card: Pick Preview Card instead for a richer preview of a link's destination.
  • vs Truncate: Use Truncate for cut-off text; it adds the tooltip with the full text for you.

Rules

  • Mount TooltipProvider once near the app root, and group nearby tooltips under one provider so later ones open without delay.
  • Use aria-disabled instead of disabled on a button that needs a tooltip, so it stays focusable.
  • Keep tooltip text short and never put links or buttons inside it.
  • Do not rely on a tooltip for instructions people need; touch users may never see it.
  • Use tone="error" only for error hints, and variant="glass" over photos or colored surfaces.

Reference

  • Tooltip docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Overlays & disclosure. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-tooltip

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Accessible Focus Statesby UI Skillbook

Keep a visible, high-contrast focus indicator on every interactive element, without a generic browser outline or none at all.

Accessibility

Better Accessibilityby jakubkrehel

Review and improve focus states, keyboard support, ARIA, forms, screen readers, hit areas, and motion accessibility.

AccessibilityExternalGitHub stars: 9.2K

Build Primitiveby PrototyperAI

Build foundational UI primitives from scratch with strong ARIA, keyboard, focus, and state handling.

AccessibilityExternalGitHub stars: 7

Link Purposeby AccessLint

Compatibility listing for link-purpose installs from AccessLint's marketplace skill set.

AccessibilityExternalGitHub stars: 114

Back to Siteplane UI