Adding Hovertext on KendoUI Grid Column Headers

Question

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 b

Answer 1

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:*

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();
    }
});