Prepared Docs

Accessible tooltips ensure all users can access supplementary information regardless of input method or assistive technology. When using Tooltip, follow these best practices.

Tooltips support keyboard interaction for accessibility.

Focus Behavior

Tooltips appear when trigger elements receive focus.

Tab: Focuses the trigger element and shows the tooltip
Shift + Tab: Moves focus away and hides the tooltip
Escape: Hides the tooltip while maintaining focus on the trigger

Users can access tooltip information using keyboard navigation without requiring mouse interaction.

Interactive Elements

Ensure trigger elements are keyboard accessible.

Use naturally focusable elements (buttons, links, inputs)
Ensure custom elements have appropriate tabindex
Don't use tooltips on elements that can't receive focus
Test keyboard navigation with all tooltip triggers

Tooltip / API and Development

Accessibility / Screen Reader Support

Focus Behavior

Interactive Elements

Accessible tooltips ensure all users can access supplementary information regardless of input method or assistive technology. When using Tooltip, follow these best practices.

Tooltips support keyboard interaction for accessibility.

Focus Behavior

Tooltips appear when trigger elements receive focus.

Tab: Focuses the trigger element and shows the tooltip
Shift + Tab: Moves focus away and hides the tooltip
Escape: Hides the tooltip while maintaining focus on the trigger

Users can access tooltip information using keyboard navigation without requiring mouse interaction.

Interactive Elements

Ensure trigger elements are keyboard accessible.

Use naturally focusable elements (buttons, links, inputs)
Ensure custom elements have appropriate tabindex
Don't use tooltips on elements that can't receive focus
Test keyboard navigation with all tooltip triggers

Tooltip / API and Development

Accessibility / Screen Reader Support

Focus Behavior

Interactive Elements