Tooltip

CSS-only, driven by a data attribute and :hover / :focus-within. No portal, no positioning library — which is a real trade-off, stated below rather than hidden.

Placements

On an icon

Wrapping a focusable child means the tooltip opens on keyboard focus too, not just hover. A tooltip that only responds to a mouse is decoration.

The trade-off

Because it is a pseudo-element on the trigger, this tooltip cannot escape an ancestor with overflow: hidden. Inside a scrolling table cell it will be clipped.

The alternative is a portal plus a positioning library, which costs a dependency, a render cycle per open, and a class of z-index bugs. For the density this system targets, the CSS version is right almost everywhere. Reach for a portal when you actually hit clipping — not in advance.

Also

The tip is plain text via data-tip. If you need markup or an interactive element inside, you need a popover, not a tooltip.