kendo-tooltip - 自定义剑道工具提示的形状

Question

我想为网格自定义剑道工具提示的形状。
我在剑道网站上看到了这个例子，它在盒子外面有箭头，盒子有一个漂亮的圆形。在 css 上工作，使用 .k-tooltip 我可以更改宽度、高度、背景。但是我得到一个带有箭头的方形框，有时会覆盖部分文本内容。
我认为标注会有所帮助，但我什么也得不到。
如何更改箭头的形状、图像和位置、框的形状？
此外，如何仅在网格单元格中的部分文本可见时触发工具提示？
非常感谢任何提示

问候

马可

Answer 1

我认为“箭头”是指标注。您可以通过以下方式关闭标注：

$(document).ready(function() {
  $("#target").kendoTooltip({
    callout: false
  });
});

关于您的问题“此外，如何仅在网格单元格中的部分文本可见时触发工具提示？”

如果我理解正确，您只想在有省略号的文本时显示工具提示（在单元格中部分可见），但如果有全文可见或没有文本，您不想显示工具提示在细胞中。如果是这种情况，您可以这样做：

function initializeTooltip(element, filter) {
    return element.kendoTooltip({
        autoHide: true,
        filter: filter,
        callout: false,
        content: function (e) {
            var target = e.target,
                tooltip = e.sender,
                tooltipText = "";

            if (isEllipsisActive(target[0])) {
                tooltipText = $(target).text();
            }

            tooltip.popup.unbind("open");

            tooltip.popup.bind("open", function (arg) {
                tooltip.refreshTooltip = false;

                if (!isEllipsisActive(target[0])) {
                    arg.preventDefault();
                } else if (tooltipText !== $(target).text()) {
                    tooltip.refreshTooltip = true;
                }
            });

            return tooltipText;
        },
        show: function () {
            if (this.refreshTooltip) {
                this.refresh();
            }
        }
    }).data("kendoTooltip");
};

// determanes if text has ellipsis
function isEllipsisActive(e) {
    return e.offsetWidth < e.scrollWidth;
}

$(function () {
    initializeTooltip($("#yourGridId"), ".tooltip");
});

在这种情况下， tooltip是您想要使用 tooltip 的列的类名，但您可以随意调用该类。如果您使用的是 Kendo ASP.NET MVC，它将看起来像这样

      c.Bound(p => p.ClientName)
          .Title("Client")
          .HtmlAttributes(new {@class = "tooltip"});