Tooltip Component

Positions

Alignments (start / center / end)

Independent from the position. Shown forced-open on a wide trigger so the offset is visible.

Alignment through a wrapper — Button (hover to reveal)

The new align is forwarded by the wrappers via a tooltipAlign prop (Button, LinkButton, LangDropDown, MenuLink, MenuNavigation, FlagItem, FlagMenu, InputTime).

Disabled triggers

DaisyUI opens the bubble on .tooltip:hover — on the wrapper, not on the trigger — and a disabled .btn takes no pointer events, so the hover lands on the wrapper and the bubble opens over a button that cannot be clicked. The wrappers (Button, LinkButton, MenuLink, FlagItem, InputTime) pass their disabled state to show; a bare Tooltip has to be told.

Colours

float — inside anything that scrolls

DaisyUI draws its tooltip in a pseudo-element of the trigger, so any ancestor hiding its overflow cuts it off, and near an edge of the window it leaves the screen rather than flipping. float moves the bubble into a portal and places it against its trigger. The two boxes below are the same list in the same overflow — hover a row in each.

The floating one also opens on focus — tab into the list — and never on touch, where a tap has somewhere better to go than under a bubble.

float — the four sides and the three alignments

position and align carry the same names, the same values and the same meaning on both paths, so a bubble changes path without changing how it is written. The side asked for is the side used : the facing one is taken only when the window leaves no room — scroll until a trigger nears the top of the screen and watch top give way while bottomstays put. Where the bubble actually landed is written on it asdata-position and data-align, so a fallback is a thing to look at rather than to guess.

Beside the trigger, the alignment slides along the block axis instead — the triggers below are tall so it can be seen.

The bubble aligns on the anchor, so the anchor is what to shape

A tooltip renders an element of its own, and that element is what the placement measures. Made to fill its cell, it is the cell whose right edge align="end" lines the bubble up with ; hugging its badge, it is the badge. Neither is wrong and no default can tell them apart — an element that hugs its content is the answer, and it is the caller's to give. Both rows are held open with open, which the floating path honours like the CSS one, and which makes the bubble follow the page as it scrolls.

float — inside a modal

A modal <dialog> paints in the browser's top layer, above everything a z-index can reach. A bubble portaled to the body would therefore be drawn under the modal it belongs to, so a floating tooltip whose trigger is inside an open dialog portals into that dialog instead — the same reasoning Popoveralready follows.

Rich content