Tooltip
React componentProvide a brief explanation on hover or keyboard focus.
Try it out
Use the live controls or open the Code tab to view and copy the example.
API reference
Generated from the package’s TypeScript exports. Standard React event and ARIA attributes are also accepted where the component wraps a native element.
| Prop | Type | Description |
|---|---|---|
contentRequired | string | See the typed definition and working example for this option. |
childrenRequired | ReactElement<unknown, string | JSXElementConstructor<any>> | Content rendered inside the component. |
side | "left" | "right" | "top" | "bottom" | undefinedDefault: "top" | See the typed definition and working example for this option. |
Accessibility & interaction
Radix opens immediately on keyboard focus and after 800ms hover. Tooltip content is plain text, dismisses on Escape, and should never contain required instructions or interactive controls.
Visible focus, reduced motion, and both color themes are shared across staqui. Choose labels and document structure that make sense in your application; automated checks do not replace assistive-technology testing.
Variants & implementation notes
Radix opens immediately on keyboard focus and after 800ms hover. Tooltip content is plain text, dismisses on Escape, and should never contain required instructions or interactive controls.
Use the typed API above for the supported variants. The example demonstrates the primary composition; shared controls inherit hover, focus, active and disabled treatment where applicable.