We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to render tooltip for grid content

Essential Grid don’t have in-built support to show tooltip on grid cell content but we can render the tooltip for the grid cells using the queryCellInfo and dataBound events.

It involves the following steps

  1. Initialize the grid with queryCellInfo and dataBound client side events.
  2. Add the DOM manipulation required, if any, on TD cells in the queryCellInfo event.
  3. Render the tooltip in the dataBound event.

In the below let us see how to use the Bootstrap tooltip for the grid content.

Include the following CSS and JS files to work with Bootstrap tooltip

 

1. Initialize the grid with queryCellInfo and dataBound client side events.

Grid Initialization

JS

 

MVC

 

ASP

 

2. Add the DOM manipulation required, if any, on td cells in the queryCellInfo event. The QueryCellInfo is the suitable event to perform the cell based actions.

 

3. Render the tooltip in the dataBound event. The DataBound event is the convenient event to render the tooltip since it triggered after the grid content is ready or appended to the body.

 

The output will be as follows.

 

 

 

Article ID: Published Date: Last Revised Date: Platform: Control:
5436 09/22/2015 09/22/2015 JavaScript ejGrid
Did you find this information helpful?
Add Comment
You must log in to leave a comment

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon