syidaxgrid
Home Pricing Settings

GRID FEATURE

Cell tooltips

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

Markdown source Features

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.

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.

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.

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.

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.

Related reading