Show Tooltip for Column Records

The example below demonstrates how to show Kendo UI Tooltip for Kendo UI Grid columns.

Example

    <div id="grid"></div>
    <style>
      #grid{
        width:300px;
      }
    </style>
    <script>
      var grid = null;

      $(document).ready(function () {
        var dataSource = new kendo.data.DataSource({
          data: [
            {ID:1 ,Text: "Integer arcu odio, egestas nec pretium sit amet, aliquet vel nibh. Aliquam ac ante fringilla, consectetur erat at, dapibus est. Pellentesque facilisis iaculis neque, in auctor eros fringilla ut. Proin sit amet aliquet lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer porttitor vel neque ac dapibus. Nullam bibendum, velit quis tristique placerat, nibh ante vulputate sem, vel sodales tellus felis nec mi. In hac habitasse platea dictumst. Suspendisse in lacus nec ligula elementum interdum. Mauris at bibendum elit. Mauris dignissim, quam quis blandit rutrum, nunc nulla porttitor eros, eget volutpat magna nulla eu massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce consectetur blandit est ut commodo. Vestibulum vel tellus a purus accumsan venenatis."},
            {ID:2 ,Text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "},
            {ID:3 ,Text: " Duis ut nulla eget lectus posuere tempor. "}
          ],
          schema: {
            model: {
              fields: {
                ID: { type: "number" },
                Text: { type: "string" }
              }}
          },
          pageSize: 20
        });

        grid = $("#grid").kendoGrid({
          dataSource: dataSource,
          scrollable: true,
          filterable: true,
          toolbar: ["create"],
          columns: [
            { field: "ID", width: "50px" },
            { field: "Text", width: "200px", attributes: {
              style: 'white-space: nowrap '
            }  }],
          editable: "incell"
        }).data("kendoGrid");

        $("#grid").kendoTooltip({
          filter: "td:nth-child(2)", //this filter selects the second column's cells
          position: "right",
          content: function(e){
            var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
            var content = dataItem.Text;
            return content;
          }
        }).data("kendoTooltip");
      });
    </script>

See Also

• JavaScript API Reference of the Grid
• How to Add Cascading DropDownList Editors
• How to Copy Data from Excel
• How to Drag and Drop Rows between Grids
• How to Enable ForeignKey Column Sorting by Text
• How to Implement Stable Sort in Chrome
• How to Initialize Data Attribute with Detail Template
• How to Load and Append More Records While Scrolling Down
• How to Perform CRUD Operations with Local Storage Data
• How to Persist Expanded Rows after Refresh
• How to Set Cell Color Based on ForeignKey Values
• How to Update Toolbar Content Using MVVM Binding

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.