# Cell tooltips

Tooltips help users briefly inspect truncated names or long descriptions. Do not hide essential errors or guidance exclusively inside tooltips.

Canonical: https://grid.syidax.com/docs/features/tooltip/

<a id="understand"></a>

## How it works and when to use it

Tooltip content can differ from the displayed cell value. Use tooltipField or tooltipValueGetter on the column, taking read permissions and actual overflow into account.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

- [Installation and integration · Shared sample data](https://grid.syidax.com/docs/guides/getting-started.md)

<a id="example-1"></a>

## Example 1. Display a separate description field

Include both a short product name and a longer description in the source data.

```javascript
grid.columnDefs = [{ field: 'product', headerName: 'Product', tooltipField: 'description' }];
```

Verify the result: Hover over a product name to inspect that row's description. Supply the description field from your server alongside the other data.

<a id="example-2"></a>

## Example 2. Generate a dynamic description

Calculate supporting text from the current cell value.

```javascript
grid.columnDefs = [{
  field: 'quantity', headerName: 'Quantity',
  tooltipValueGetter: params => 'Order quantity: ' + String(params.value ?? 0),
}];
```

Verify the result: Each row displays a description of its own quantity. Keep currency, units, and the actual data type consistent.

<a id="example-3"></a>

## Example 3. Inspect tooltip results in your app

Use the public API to read the computed text for the product cell in the first displayed row.

```javascript
console.log(await grid.getCellTooltipText({ rowIndex: 0, field: 'product' }));
```

Verify the result: Do not expose confidential values through tooltips on cells the user cannot read. Also reduce the actual column width to test truncation.

<a id="pitfalls"></a>

## Combining features and troubleshooting

Do not make important functionality accessible only through hover. Provide the same information in the body or detail view for touch and keyboard users.

Do not mutate values inside tooltip callbacks. Return display text and use editing APIs to save changes.

<a id="related-api"></a>

## APIs used by this feature

- [headerTooltip](https://grid.syidax.com/docs/columns/headerTooltip.md) — Supporting description for the header.
- [tooltipField](https://grid.syidax.com/docs/columns/tooltipField.md) — Source data field used for tooltips.
- [tooltipValueGetter](https://grid.syidax.com/docs/columns/tooltipValueGetter.md) — Calculates tooltip content from the current cell context. Do not expose unauthorized values indirectly.
- [getCellTooltipText](https://grid.syidax.com/docs/methods/getCellTooltipText.md) — Calculates actual tooltip text from the target cell and overflow context.

<a id="next"></a>

## Related reading

- [How rows, columns, and IDs relate](https://grid.syidax.com/docs/guides/concepts.md)
- [Connect results and events](https://grid.syidax.com/docs/guides/data-event-access.md)
- [Explore in Features](https://grid.syidax.com/grid/tooltip) — The guide describes which interactions are available to try.