kendo tooltip is shown only after second 'hover' event

Question

I use kendo grid and want to show kendo tooltip for icon in header cells. I have the following code:

                <div id="grid"></div>

                <script>
                    $(document).ready(function () {
                        var grid = $("#grid").kendoGrid({
                            dataSource: {
                                type: "json",
                                transport: {
                                    read: {
                                        url: "@Html.Raw(Url.Action("List", "i3screenResult"))",
                                        type: "POST",
                                        dataType: "json",
                                        data: function () {
                                            var data = {
                                            };
                                            addAntiForgeryToken(data);
                                            return data;
                                        }
                                    }
                                },
                                schema: {
                                    data: "Data",
                                    total: "Total",
                                    errors: "Errors"
                                },
                            },
                            dataBinding: function (e) {
                                $('.questionmark').on("hover", function () {
                                    var tooltip = $(this).kendoTooltip({
                                        content: $(this).attr('tooltip'),
                                        width: 120,
                                        position: "top",
                                        animation: {
                                            open: {
                                                effects: "zoom",
                                                duration: 150
                                            }
                                        }
                                    }).data("kendoTooltip");
                                });
                            },
                            scrollable: false,
                            columns: [
                                {
                                    field: "BackgroundReportAccount",
                                    headerTemplate: "@T("DrugConsortium.i3screen.Fields.BackgroundReportAccount") <img src='/images/question-mark-icon.png' class='questionmark' tooltip='@T("DrugConsortium.i3screen.Fields.BackgroundReportAccount.Details")' />",
                                    width: 150
                                },
                                {
                                    field: "ProviderReferenceId",
                                    headerTemplate: "@T("DrugConsortium.i3screen.Fields.ProviderReferenceId") <img src='/images/question-mark-icon.png' class='questionmark' tooltip='@T("DrugConsortium.i3screen.Fields.ProviderReferenceId.Details")' />",
                                    width: 150
                                },
                                //....
                            ]
                        });
                    });
                </script>

It works, but only since second hover event for img. Why so and how to fix?

Answer 1

Try this AFTER grid initialization:

$('#grid').kendoTooltip({
    content: function(e) { 
        return $(e.target).attr('tooltip');
    },
    filter: 'img.questionmark', 
    width: 120,
    position: "top",
    animation: {
        open: {
            effects: "zoom",
            duration: 150
        }
    }
});

Also, you should change the attribute name from tooltip to data-tooltip since tooltip is not a standard HTML attribute. Then you can get it's value with $(e.target).data('tooltip');

Demo