Question

如何使用自定义内容显示网格的工具提示？我想显示coloumn 2和coloumn 3的工具，内容是一个名为spanid或div的字符，称为divid？

var tooltip = $("#Grid").kendoTooltip({
        filter: "td",
        width: 120,
        position: "top",
        content: value
    }).data("kendoTooltip");

我试着写这个，但似乎错了。

var tooltip = $("#Grid").kendoTooltip({
        filter: "td[3n]||td[2n]",
        width: 120,
        position: "top",
        content: divid.html
    }).data("kendoTooltip");

Answer 1

这是我的方案的工作代码，它将使用类 pLink

的所有产品名称的工具提示

$(".pLink")
    .kendoTooltip(
    {
        content: kendo.template($("#toolTipTemplate").html()),
        position: "top",
        width: "auto",
        height: "auto",
        animation: {
            close: { effects: "fadeOut zoom:out", duration: 300 },
            open: { effects: "fadeIn zoom:in", duration: 300 }
        }
    });

<script id="toolTipTemplate" type="text/x-kendo-template">
                <p class="tooltipProductName">#=target.data('title')#</p>
</script>

Answer 2

 //show the tooltip
            tooltip = $("#grdData").kendoTooltip({
                filter: 'td:not(:first-child, :nth-child(2), :empty)',
})

这将允许您选择第一列，第二列，它也将过滤掉空单元格。您可以使用第n个子选择器。由于这是一个CSS3选择器，它可以在IE9 +中运行，chrome和firefox不会成为问题。

希望这有帮助！

如何使用自定义内容显示网格的工具提示？

2 个答案: