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.

Demonstrates configurable side and align values.

Adds a close button for manual dismissal.

Opens on hover instead of click.

Shapes from sharp to fully rounded.

Applies a smooth continuous curve between adjacent corners.

Applies sharp corners with no border-radius.

Additional variants and interactive states.

Applies a custom accent color.

Renders without motion wrappers or interactive animations.