自定义剑道工具提示的形状 [英] customize shape of kendo tooltip

问题描述

我想为网格自定义Kendo工具提示的形状.
我在剑道网站上看到了该示例，该示例在框的外部具有箭头，并且该框具有良好的圆形形状. 使用.k-tooltip在CSS上工作，我可以更改宽度，高度，背景.但是我得到一个带有箭头的方框，该方框有时会覆盖部分文本内容.
我以为标注会有所帮助，但我什么也没能得到.
如何更改箭头的形状，图像和位置，盒子的形状?
此外，仅当网格单元格中的部分文本可见时，我如何才能触发工具提示?
非常感谢您的任何提示

I would like to customize the shape of Kendo Tooltips for a grid.
I saw the example on kendo site, it has the arrow outside the box, and the box has a nice rounded shape. Working on css, using .k-tooltip I can change width, height, background. But I get a square box with the arrow inside which sometimes overrides part of the text content.
I thought that callout would help but I was not able to get anything.
How can I change shape, image and position of the arrows, shape of the box ?
Moreover, how can I trigger the tooltip only when part of the text in a grid cell is visible ?
Thanks a lot for any hint

致谢

马可

推荐答案

我认为箭头"表示标注.您可以通过以下方式关闭标注:

I think "arrow" you mean callout. You can turn off callout by:

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

关于您的问题此外，仅当网格单元格中的部分文本可见时，我如何才能触发工具提示?"

About your question "Moreover, how can I trigger the tooltip only when part of the text in a grid cell is visible?"

如果我对您的理解正确，那么您只想在出现带省略号的文本(在单元格中部分可见)时显​​示工具提示，但是如果有可见的全文或如果存在则不希望显示工具提示单元格中没有文本.如果是这样，您可以这样做:

If I understand you correctly you would like to show tooltip only when there is text with ellipsis (partially visible in the cell), but you don't want to show a tooltip if there is a full text is visible or if there is no text in the cell. If that is the case, you can do this way:

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，它将看起来像这样

tooltip in this case is class name of the column that you would like to use tooltip for, but you can call that class anyway you wish. In case if you are using Kendo ASP.NET MVC it will look something like this

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

这篇关于自定义剑道工具提示的形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！