developer guide
Data Grid Cell Tooltips
cell.tooltip turns a cell into somewhere the rest of the story can live: a plain title string, rich markup, or a panel you build on open and tear down on close. Whatever it shows is tied to the cell with aria-describedby, so it reaches a screen reader too.
Developer guide › Columns and cell rendering › Data Grid Cell Tooltips
Rich cell tooltips
A cell.tooltip string becomes the browser's own title. That is one
line of plain text, shown on the browser's schedule, styled by the browser, and unreachable
with a keyboard - it cannot show a related record, a small chart, a list of validation
errors or an edit history. The object form of cell.tooltip declares a tooltip the
grid draws itself instead: { render, mount, unmount }. The
plain-text form is unchanged and still produces a title.
render(params) may return an element, a { title, rows, note } spec the
grid renders as text, a { html } wrapper, or a string. A bare string is
always text, never markup. That is deliberate and is not a style choice: the most
natural tooltip anyone writes is render: (p) => p.value, and a value is row data - so if a bare string were markup, a field holding an onerror attribute would
execute while the code that rendered it looked harmless. Markup has to be asked for explicitly,
in the source, where review can see it; and what goes through { html } is scrubbed
of script the same way allowUnsafeTemplates output is.
mount(el, params) and unmount(el) hold live content. The grid core
never imports a module, so a sparkline or a KPI tile is mounted by you, inside
mount, from a module bundle your page loaded. unmount runs on every
close, so nothing is left running behind a hidden tooltip.
tooltip: { delay, maxWidth } on the grid carries the defaults. delay
is the rest before anything is built - 400ms by default, which is what stops a pointer
sweeping across the grid from mounting a chart per cell - and maxWidth caps
the width (a number is pixels, a string is used as written). Neither switches tooltips on: a
column with no cell.tooltip has none.
Keyboard and assistive technology. Focusing a cell shows the same tooltip after
the same delay, and the cell carries aria-describedby pointing at it, so the
content is announced rather than merely drawn. Any aria-describedby the cell
already had - a validation message, for instance - is preserved and restored, not
replaced. The tooltip is hoverable and stays open while the pointer rests on it, and Escape
dismisses it without moving the pointer (WCAG 2.2 AA, 1.4.13). Escape is consumed only while a
tooltip is open, so an editor, a menu or a maximised grid still sees it otherwise.
Pooled rows. The tooltip closes on scroll, and its content is resolved from the DOM at the moment it opens rather than when the pointer arrived. Both follow from the same fact: rows and cells are recycled as the grid scrolls, so a bubble left open would be anchored to a node that has since been handed to a different row. It can therefore never show one row's content over another's.