How to Implement Rich Tooltip to a Grid Field

Rich tooltip on a grid feature enables the user to see tooltips with images and formatted text on a grid cell upon hovering. This feature also enables the developer to specify the delay time after hovering before it displays the tooltip message. The information of the tooltip has to be available on the grid. To display a rich tooltip on a column grid, you will need to configure the grid and the grid column with the following steps.

1. Set the control name of the grid.

2. Set the control name of each column in the grid.

Setting the control name of the grid column is done in the cell column heading text. For a cell that does not have a tooltip, the control name is set like as follows.

<controlname>:<column text>

For example:

ProductDescription:Product Description

For a column that you want to show a tooltip, the control name of the cell is set like as follows. The tooltip message will be displayed on a every row of the column.

<controlname>:tooltipfields=<grid cell control name where you extract the information from separated by comma with prefix from the grid control name>:showdelay=<in millisecond>:<column text>

For example:

ProductName:tooltipfields=GridPProductCode,GridPProductDescription,GridPProductImage:showdelay=500:Product Name