Blazor DataGrid Example - Tooltip
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 |
This sample demonstrates the DataGrid tooltip feature for displaying contextual information on cell hover.
The Blazor DataGrid supports tooltips for both header and content cells through the ShowTooltip property. When enabled, tooltips appear on hover, providing additional context and improving user experience with relevant information.
Customize tooltip content using the TooltipTemplate wrapped within the GridTemplates component. This allows you to create rich, visually enhanced tooltips with custom layouts including images, icons, and additional information.
The TooltipTemplateContext provides access to the following properties for building dynamic tooltips:
- Value - The content of the hovered cell (column name for headers, cell value for content)
- RowIndex - The row number of the hovered cell (returns -1 for header cells)
- ColumnIndex - The column number of the hovered cell
- Data - The complete row data object (not available for header cells)
- Column - Column details including field name, header text, and formatting information
In this demo, the tooltip template displays employee information with photographs, icons, and contextual details, demonstrating how to create professional and informative tooltips.
Hover over grid cells to see the custom tooltip content in action.