Tooltip

Display helpful text on hover or focus.

Core Examples

Accessible React components with Base UI and Yumma CSS.

Standard implementation with default configuration.

Positions a directional Arrow pointing at the trigger.

Adds a close button for manual dismissal.

Opens on hover instead of click.

Demonstrates configurable side and align values.

Shapes from sharp to fully rounded.

Applies sharp corners with no br-(value).

Applies a smooth continuous curve between adjacent corners.

Additional variants and interactive states.

Applies a custom accent color.

Renders without motion wrappers or interactive animations.