Adding Hovertext on KendoUI Grid Column Headers

css kendo-ui

18,371

Solution 1

If the contents of the tooltip is static, then you could use the columns.headerTemplate to then add a tooltip to the header.

Example jsFiddle.

The code:

$("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        },
        schema: {
            model: {
                fields: {
                    OrderID: {
                        type: "number"
                    },
                    Freight: {
                        type: "number"
                    },
                    ShipName: {
                        type: "string"
                    },
                    OrderDate: {
                        type: "date"
                    },
                    ShipCity: {
                        type: "string"
                    }
                }
            }
        },
        pageSize: 20,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    },
    height: 430,
    filterable: true,
    sortable: true,
    pageable: true,
    columns: [{
        field: "OrderID",
        filterable: false
    },
        "Freight", {
        field: "OrderDate",
        title: "Order Date",
        width: 120,
        format: "{0:MM/dd/yyyy}",
        headerTemplate: '<span title="This is the date the order was made.">Order Date</span>'
    }, {
        field: "ShipName",
        title: "Ship Name",
        width: 260,
        headerTemplate: '<span title="The company the order was shipped to.">Ship Name</span>'
    }, {
        field: "ShipCity",
        title: "Ship City",
        width: 150,
        headerTemplate: '<span title="The city the order was shipped to.">Ship City</span>'
    }]
});

$("#grid").kendoTooltip({
    filter: ".k-header span"
});

Solution 2

If you want to define tooltip on every columnn header, you can define kendoTooltip on grid thead element like this:

grid.thead.kendoTooltip({
    filter: "th",
    content: function (e) {
        var target = e.target;
        return $(target).text();
    }
});

This shows hover text when you hover the header anywhere, not only on text in the header. The tooltip is shown even when the column has minimal width and the text of the header is not presented/shown in its full length or isn't shown at all. See example.

Here's the complete code from the example at jsbin.com, in case it needs to be reproduced in the future:

HTML:*

<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
 <div id="grid"></div>  
</body>
</html>

JavaScript:

var grid = $("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        },
        schema: {
            model: {
                fields: {
                    OrderID: {
                        type: "number"
                    },
                    Freight: {
                        type: "number"
                    },
                    ShipName: {
                        type: "string"
                    },
                    OrderDate: {
                        type: "date"
                    },
                    ShipCity: {
                        type: "string"
                    }
                }
            }
        },
        pageSize: 20,
        serverPaging: true
    },
    height: 430,

    columns: [{
            field: "OrderID",
            width: 250
        }, {
            field: "ShipName",
            title: "Ship Name",
            width: 200

        }
    ]
}).data("kendoGrid");

grid.thead.kendoTooltip({
    filter: "th",
    content: function (e) {
        var target = e.target; // element for which the tooltip is shown
        return $(target).text();
    }
});

Solution 3

For anyone attempting to do this with Kendo UI MVC it can be achieved by using the following logic:

On the grids DataBound event create a JavaScript function to handle the databound.

Within that JavaScript function add the following code (for my example I've named my function createToolTip()

function createToolTip() {

    $("tr > th").kendoTooltip({
        position: "top"
    });
}

This will create a tool tip to display on the grids header with the position of the tool tip above the header.

18,371

Bryce Sandlund

Computer Science Ph.D. Student at University of Waterloo, Data Structures under Ian Munro Previously employed as a Software Development Engineer on Xbox Live, Microsoft Competitive Programmer B.S. in Math + Computer Science from Iowa State University, worked with Steve Butler M.S. in Computer Science from University of Wisconsin-Madison, Algorithmic Number Theory/ Symbolic Computation under Eric Bach

Updated on June 04, 2022

Comments

Bryce Sandlund about 2 years

I'm trying to add custom hovertext (like a tooltip), to the column headers in a KendoUI grid. The text should be specific to each column and ideally not displayed on anything but the header row. There isn't a tooltip option for the Grid object but I'm not sure if there might be a way to do it either using CSS or their row template configuration.

Would be interested in hearing if anyone has done this before and if so how, or if it may not be possible.

Thanks.
Adi Inbar over 9 years

Links can be helpful as supplemental information, but link-only answers are strongly discouraged. Please include a summary of the linked information that's relevant to the question, and explain how it resolves the issue.
Adi Inbar over 9 years

Better, but you should always provide the complete code needed to reproduce examples from sites like jsbin and jsfiddle, in case of link rot. Definitely do post the significant part in its own separate block, as you did; then add the rest of the code for reference at the bottom. I've added it for you. And +1 since you've shown that this works.
yogi over 8 years

a little enhancement: filter: ".k-header .k-link span" targets the header cell more accurately. The one in answer makes filter popup to not show sometimes because of the tooltip coming in between.