How to get tooltip to display only on column header name on a Kendo Grid?

Question

I have a kendo grid and I am hiding the top row showing all the headers. I am doing this to give it a cleaner appearance and the users should know instantly the data in each column after some use.

I want to add the column names in the tooltip of each cell in case a new user comes in, they can hover over the data and see the column name.

I have the code below but I need to know how to target the column name.

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

Patrick95 · Accepted Answer · 2022-02-18 19:35:13Z

1

myGrid.kendoTooltip({
        filter: "th[data-title]",
        content: function (e) {
            if (e.target) {
                var target = e.target;
                return $(target).text();
            }
        }
    });

Modified the filter to "th" in order to show tooltip on column headers. Further modified with [data-title] to only show tooltip where there is a title. Thus, disabling tooltip or mouseover on columns with no title. Online resources say to add [title] but that alone does not work. Hopefully this helps someone.

answered Feb 18, 2022 at 19:35

Patrick95

10214 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get tooltip to display only on column header name on a Kendo Grid?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related