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. The floating bubble teleports to document.body, or into an open modal Dialog / Drawer so it is not left inert under showModal().

Live example

Use the Configuration panel for placement, alignment, size, trigger, delays, and open. m is the compact tooltip and l the standard one; below a 768px viewport each uses its mobile variant (Sizes). 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.