edible-tooltip

A styled tooltip that replaces the browser's unstyled title attribute. Place <edible-tooltip> as a child of any interactive element — it registers on its parent and shows on hover or keyboard focus.

On a button

Hover or focus the button to reveal the tooltip.

On a link

Works on any focusable element.

Learn more Opens the documentation in a new tab.

On an icon button

Useful for icon-only controls where the label is not visible on screen. The tooltip serves as the accessible description.

Multiple tooltips in a row

Each element gets its own independent tooltip instance.

Name The full display name of the user.	Role The user's permission level in the system.	Status Whether the account is currently active.
Alice	Admin	Active
Bob	Editor	Inactive

Long tooltip text

The popup wraps at 280 px max-width.

← All examples