时间戳

首页 > 解决方案 > 剑道工具提示仅在第二个“悬停”事件后显示

kendo-ui - 剑道工具提示仅在第二个“悬停”事件后显示

问题描述

我使用剑道网格并希望在标题单元格中显示剑道工具提示图标。我有以下代码：

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

它有效，但仅在 img 的第二次悬停事件之后。为什么会这样以及如何解决？

标签： kendo-uikendo-gridkendo-tooltip

解决方案

在网格初始化之后试试这个：

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

此外，您应该将属性名称从 更改tooltip为data-tooltip因为tooltip不是标准的 HTML 属性。然后你可以得到它的价值$(e.target).data('tooltip');

演示

推荐阅读