Blazor DataGrid Example - Tooltip
The Blazor DataGrid supports tooltip for both header and content cells through the ShowTooltip property. When enabled, tooltip appear on hover, providing additional context and enhancing the overall user experience.
Order ID | Customer ID | Freight | Ship Name | Ship City |
|---|
| 1001 | Nancy | $80.00 | Toms Spezialitäten | Reims |
| 1002 | Andrew | $120.00 | Hanari Carnes | Munster |
| 1003 | Janet | $180.00 | Suprêmes délices | Charleroi |
| 1004 | Margaret | $60.00 | Toms Spezialitäten | Lyon |
| 1005 | Steven | $130.00 | Hanari Carnes | Delhi |
| 1006 | Michael | $220.00 | MV Vishva Malhar | Tokyo |
| 1007 | Robert | $90.00 | Toms Spezialitäten | Toronto |
| 1008 | Laura | $160.00 | Suprêmes délices | Sydney |
| 1009 | Anne | $90.00 | CS Celeste | Reims |
In this sample, the tooltip template presents a rich and customized tooltip that includes an employee image, icons, and additional contextual information, demonstrating tooltip customization within the DataGrid.
The custom tooltip content is defined by wrapping the TooltipTemplate inside the GridTemplates component, allowing for flexible and visually enhanced designs.
Tooltip customization is supported through the TooltipTemplateContext which provides access to the following built-in properties:
- Value - Shows the content of the hovered cell—either the column name (for headers) or the cell value (for content).
- RowIndex - Gives the row number of the hovered cell. Returns
-1for header cells. - ColumnIndex - Gives the column number of the hovered cell.
- Data - Provides the full data of the row being hovered. Not available for header cells.
- Column - Contains details about the column, like field name and formatting.