Tooltip

Display helpful text on hover or focus.

Core Examples

Accessible React components with Base UI and Yumma CSS.

Base

Standard implementation with default configuration.


Arrow

Positions a directional Arrow pointing at the trigger.


Placement

Demonstrates configurable side and align values.


Close

Adds a close button for manual dismissal.

Hover

Opens on hover instead of click.

Shape Examples

Shapes from sharp to fully rounded.

Squircle

Applies a smooth continuous curve between adjacent corners.


Square

Applies sharp corners with no border-radius.

More Examples

Additional variants and interactive states.

Color

Applies a custom accent color.

Static

Renders without motion wrappers or interactive animations.