Question

我想为网格自定义Kendo Tooltips的形状我在剑道网站上看到了这个例子，盒子外面有箭头，盒子有圆润的形状。在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");
});

在这种情况下，

工具提示是您要使用工具提示的列的类名，但您可以随意调用该类。如果您使用的是Kendo ASP.NET MVC，它将看起来像这样

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

自定义kendo工具提示的形状

1 个答案: