Tooltip

Shows a label near a trigger element on hover/focus. Wraps children in <div class="tooltip" data-tip="...">.

Default

The tip appears above the trigger by default.

Positions

Use position to place the tip on any of the four sides.

Colors

The color prop applies a semantic color to the tip bubble.

Always open

Set open to force the tooltip to be permanently visible — useful in docs or demos.

On any element

The tooltip wrapper works around any inline element — icons, badges, text, images.

Long tip text

DaisyUI's tooltip wraps long strings naturally. Keep tips concise for best UX.