How to enable tooltip on Iggrid column Header.

Hi,

I have the tooltip displayed on the column  values. I need to apply the tooltips on column header text as well.

Could you please let me know with sample code how to enable the tooltip for the column headers.

Thanks,

Shrenath.

Hello,

Thank you for posting in our community.

In order to add tooltip to the column header you should add "title" attribute to the "th" element of the column. Each "th" element has "id" attribute which has the following structure "<gridId>_<columnKey>" where <gridId> is the id of the grid and <columnKey> is the key of the column.

Here is the example code:

Code Snippet

1. <script type="text/javascript">
2. var adventureWorks = [{“ProductID”:1},{“ProductID”:2},{“ProductID”:3},{“ProductID”:4},{“ProductID”:5},{“ProductID”:6}];
3.     $(window).load(function () {
4.     $("#grid1").igGrid({
5.         columns: [
6.             { headerText: “Product ID”, key:“ProductID”, dataType:“number”, width: “100px”}
7.         ],
8.         autoGenerateColumns: false,
9.         dataSource: adventureWorks
10.     });
11.     $("#grid1_ProductID").attr("title", "my custom title");
12. });
13. </script>

 
Please let me know if you need any further assistance with this matter.

It can be added to Grid Configuration as well, as in:

1. <script type="text/javascript">
2. var adventureWorks = [{“ProductID”:1},{“ProductID”:2},{“ProductID”:3},{“ProductID”:4},{“ProductID”:5},{“ProductID”:6}];
3.     $(window).load(function () {
4.     $("#grid1").igGrid({
5.         columns: [
6.             { headerText: “Product ID”, key:“ProductID”, dataType:“number”, width: “100px”}
7.         ],
8.         autoGenerateColumns: false,
9.         dataSource: adventureWorks,
10.         rendered: function() {$("#grid1_ProductID").attr("title", "my custom title");}
11.     });
12. });
13. </script>

To enable the tooltips with their default settings, just set the name property to “Tooltips”. The following code enables the default behavior of the igGrid Tooltips. In Javascript: $("#grid1").