Cell & Header Tooltips

There is no tooltip option anywhere in this example's code. Hovering a cell whose text is cut off shows the full value; text that already fits shows nothing. Name and Email are deliberately too narrow, Status is not.

Drag the edge of Name wider and the tooltip stops appearing on the rows that now fit — the measurement is taken on each hover, not cached from the first render.

The text always matches the screen

Salary has a valueFormatter, and the automatic tooltip shows $142,000 — the formatted text, never the raw 142000 underneath. An automatic tooltip cannot drift from what the reader is looking at, because it is what they are looking at.

Four columns, four answers, and the one that is easy to miss is the third:

• # — tooltip: false. Off. Truncated or not, nothing appears.
• Dept. — a fixed string. The same helper text on every row, whatever the cell says.
• Salary — a function. (row, column) => string. The cell reads $142,000 and the tooltip says when the figure was last reviewed. A tooltip is free to say something the cell does not.
• Name — a function that returns null for most rows. Returning null or '' hands that row back to the default: hover an On leave row for the custom line, any other row for the plain truncated name. Per row, not per column.

One column on the native tooltip

Email sets tooltipNative: true, so it uses the browser's own title instead of the styled box — no delay of ours, no theme, and no rich content, but zero JavaScript and it works anywhere. config.tooltip.native does the same for every column at once.

Point column.tooltipTemplate at a template and the tooltip becomes a themed card instead of a line of text — the same ergonomic as cellTemplate, with the same context. Hover a Salary cell.

Precedence is fixed, and this column proves it

Salary declares a tooltip string and a tooltipTemplate. You will never see the string. The order is:

tooltip: false   →  nothing
tooltipTemplate  →  the template
tooltip          →  the string or the function's return
otherwise        →  the automatic truncation text

Worth knowing before you debug a tooltip that "ignores" the text you set: a leftover tooltipTemplate outranks it.

column.headerTooltip takes the same shapes as column.tooltip — string, function, or false — and applies to the header cell. Name carries a fixed one. headerTooltipTemplate is the rich version: hover Status, whose context is { column, sortDir } rather than a row, because a header has no row.

A group header is not a leaf header

Hover Compensation. A group's spanning header takes a headerTooltip too, and this one sets it — but the default differs from everything else on this page:

• A leaf header with no headerTooltip speaks only when its label is cut off, exactly like a cell.
• A group header with no headerTooltip shows the group's own name always, truncated or not.

So setting headerTooltip on a group replaces a tooltip that was already there, while setting it on a leaf header usually adds one that was not.