Cell tooltips
Display truncated values or supporting descriptions over a cell.
Options
Changes below update the Grid and code immediately.
Hover over a product name such as Atlas Sensor and wait briefly. Target an actual data cell, not the header.
View code
Sample data included in the code · 6 rows
Usage guide
#Show truncated product names or supporting information when users hover over narrow cells.
Try it yourself
- Point to a product cell
Hover over a product name such as Atlas Sensor and wait briefly. Target an actual data cell, not the header.
- Read supporting content
Verify the tooltip's product name matches the order. Moving to another product changes its content.
- Compare column widths
Narrow the Product column by dragging its header boundary, then hover again. Truncated values remain available in the tooltip.
The row's product name appears in a tooltip.
Product currently uses tooltipField: product. Do not hide essential information exclusively in tooltips; make it readable for touch and keyboard users too.
Useful terms
- tooltipField
- The row data field read by a tooltip.
- tooltipValueGetter
- A function calculating tooltip content from row values.
API reference
#Methods1
| Method / Arguments | Return type | Description |
|---|---|---|
| target: { rowIndex: number; field: string; displayedText?: string; isOverflowing?: boolean } | Promise<string> | Resolve the tooltip text for a cell (overflow + tooltipField/tooltipValueGetter aware). |
ColumnDef3
| ColumnDef | Type / Required | Description |
|---|---|---|
stringOptional | tooltip shown on header hover/focus. When omitted, a truncated (overflowing) header still shows its full text as a tooltip. | |
GridFieldPath<TData>Optional | Row field used as tooltip text before overflow fallback. | |
GridCallback<[ValueGetterParams<TData, TValue, TContext>], unknown> | stringOptional | Computed tooltip text. Wins over `tooltipField`. |
Explore each feature
Learn when to use each feature and how to configure it. Each guide identifies live examples and features you connect in your app.