Tooltips on grid column headers

[Edward]

Wanting to add tooltips to column headers on the grid.

Trying:

$(document).ready(function () {
    //grid header tooltip
    $('thead [data-title]').kendoTooltip({
        content: function (e) {
            return $(e.target).text();
        },
    });
})

 

Seems to work except there appears to be spurious tooltips.  Please see attached 1.png and 2.png.

These appear to be from title attributes from within child elements.  Please see 3.png and 4.png.

In the case of 3.png the title="" attribute appears to be dynamically added.

Would like to remove the empty title="" tooltip and convert the column menu tooltip due to title="Column Menu" to be of kendoTooltip as well (preferably using single initialization step).

 

 

[Edward]

Tried:

 

$(document).ready(function () {
    $("#admin_grid").find(".k-grid-add").addClass("k-state-disabled").prop("disabled", true);

    //grid header tooltip
    $('thead th[data-title]').kendoTooltip({
        content: function (e) {
            return $(e.target).text();
        },
    });
    $('thead a[title]').kendoTooltip().data("kendoTooltip");
})

 

This converts the Column Menu icon to have a kendoTooltip, but also generates an empty default tooltip above it, 5.png.

If inspect element, 6.png, the title attribute is dynamically converted to tooltip="" during the generation of kendoTooltip, seems like, resulting in two tooltips (kendoTooltip below and an empty title attribute based empty tooltip above it).

[Edward]

Tried:

 

$(document).ready(function () {
    $("#admin_grid").find(".k-grid-add").addClass("k-state-disabled").prop("disabled", true);

    //grid header tooltip
    $('thead th[data-title]').kendoTooltip({
        content: function (e) {
            return $(e.target).text();
        },
    });
    $('thead a[title]').kendoTooltip().data("kendoTooltip");
})

 

This converts the Column Menu icon to have a kendoTooltip, but also generates an empty default tooltip above it, 5.png.

If inspect element, 6.png, the title attribute is dynamically converted to tooltip="" during the generation of kendoTooltip, seems like, resulting in two tooltips (kendoTooltip below and an empty title attribute based empty tooltip above it).

[Edward]

Using latest jquery lib and kendo stylesheets from kendo.cdn seemed to resolve the issues...