将鼠标悬停在 Kendo UI 网格单元格内的图像 url 上时显示图像

Question

当用户将鼠标悬停在显示在 table 单元格内的 url 上时，是否可以在某些弹出窗口或工具提示图像中显示。

我现在是这样制作的，在单元格中显示图像：

{
    field: 'image',
    title: 'Image',
    lockable: false,
    template: 
        '<div class="tooltipcontent">' +
            '<img src="' + '#= image #' + '" alt="" />' +
        '</div>',
    width: '300px'
}

Answer 1

我会这样做：

<div id="grid"></div>
    <script type="text/x-kendo-template" id="template">
        <img style="width:100px" src="#=url#">
    </script>
</div>

$("#grid").kendoGrid({...});

$("#grid").kendoTooltip({
    filter: "td:nth-child(1)", //this filter selects the first column's cells
    position: "right",
    content: function(e) {
        var dataItem = $("#grid").getKendoGrid().dataItem(e.target.closest("tr"));
        return kendo.template($("#template").html())(dataItem);
    }
}).data("kendoTooltip");

示例：Row template tooltip

将鼠标悬停在 Kendo UI 网格单元格内的图像 url 上时显示图像

Shom image on hover over imageurl inside Kendo UI grid cell

kendo-ui

kendo-grid