Tooltip

Tooltips display additional context on hover or focus.

Overview

The catnip-tooltip component wraps content and shows a tooltip on hover/focus by default, or on click when trigger="click". Use for short hints and labels.

Live example

Use the Configuration panel for position, alignment, size, trigger, delays, and open. In click mode the tooltip closes when you press outside the tooltip’s anchor and floating content.

If you control open from a Vue 3 parent with :open, read Controlling open from Vue — reactive false → null can be blocked by a Vue runtime quirk; the page links the upstream GitHub issue and the recommended ref workaround.

Accessibility

• The tooltip node is linked with aria-describedby only while visible, so assistive tech is not pointed at hidden content.
• Default icon trigger: the anchor wrapper is tabindex="0" so keyboard users can focus it. Custom anchor slot: no wrapper tabindex — put focus on a native control to avoid nested focusables and duplicate tab stops.
• disabled: aria-disabled="true" and the trigger is not keyboard-focusable when using the default icon.
• With trigger="hover", moving focus to the trigger shows the tooltip (same as hover for pointer users).
• With trigger="click", aria-expanded reflects open state; activate with Enter or Space; Escape and outside click close.
• Rich or interactive content inside the tooltip is better served by a dialog or popover pattern; this component targets short, non-interactive hints.