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

Show Tooltip for Header Titles

Environment

Product Progress Kendo UI Grid
Made with version 2021.2.616

Description

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?

Solution

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

    <div id="grid"></div>
    <script>
      $(document).ready(function () {
        var dataSource = new kendo.data.DataSource({
          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
        });

        $("#grid").kendoGrid({
          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"
        });

        $("#grid").kendoTooltip({
          filter: "th", // Select the th elements of the Grid.
          position: "right",
          width: 250,
          content: function(e){
            // Return the text content of the hovered header.
            return e.target.text();
          }
        }).data("kendoTooltip");
      });
    </script>

See Also

In this article
Not finding the help you need? Improve this article