Tooltip

A short description next to a control, on hover and on focus. It describes, it does not name — the control keeps its own name.

When to use it

An icon button needs to say what it does — the row actions use it for exactly that.
An abbreviation or a number needs one more sentence that does not fit the layout.
A control is disabled and the reason has to be given. The tooltip belongs on the wrapper, not on a disabled button that takes no focus.

When not to use it

The text is needed in order to act. A tooltip is a hint for the mouse and the eye — what a person needs to decide belongs in the label or next to the control.
The content can be selected, clicked through or worked with — that is IngotPopover.
It is used instead of the control's name. The name is the button's aria-label; the tooltip only describes it.

Properties

text: string — Translated description. Short — a sentence at most.
children: ReactElement — The control it describes. It must take a ref and aria-describedby — every kit control does.
placement: IngotPlacement — Defaults to top-start. When there is no room above, the bubble flips below.
testId: string — An anchor for tests.