New to Kendo UI for jQuery? Download free 30-day trial

Show Tooltip for Header Titles


Product Progress® Kendo UI® Grid for jQuery
Product Version 2021.2.616


The titles of some of my Grid headers are very long. How can I display a tooltip that contains all of the text when I hover over the headers?


The following example demonstrates how to show a Kendo UI Tooltip for the Kendo UI Grid headers.

    <div id="grid"></div>
      $(document).ready(function () {
        var dataSource = new{
          data: [
            {ID:1 ,Text: "Text 1"},
            {ID:2 ,Text: "Text 2"},
            {ID:3 ,Text: "Text 3"}
          schema: {
            model: {
              fields: {
                ID: { type: "number" },
                Text: { type: "string" }
          pageSize: 20

          dataSource: dataSource,
          scrollable: true,
          filterable: true,
          width: 300,
          toolbar: ["create"],
          columns: [
            { field: "ID", width: "50px" },
            { field: "Text", title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", width: "200px", attributes: {
              style: 'white-space: nowrap '
            }  }],
          editable: "incell"

          filter: "th", // Select the th elements of the Grid.
          position: "right",
          width: 250,
          content: function(e){
            // Return the text content of the hovered header.

See Also

In this article