0

グリッドの剣道ツールチップの形状をカスタマイズしたいと思います。
剣道サイトで例を見ましたが、ボックスの外側に矢印があり、ボックスは丸みを帯びた形をしています. .k-tooltip を使用して css に取り組んでおり、幅、高さ、背景を変更できます。しかし、テキストコンテンツの一部を上書きすることがあります。
コールアウトが役立つと思いましたが、何も得られませんでした。
矢印の形状、画像、位置、ボックスの形状を変更するにはどうすればよいですか?
さらに、グリッドセル内のテキストの一部が表示されている場合にのみツールチップをトリガーするにはどうすればよいですか?
ヒントをありがとう

よろしく

マルコ

4

1 に答える 1

3

「矢印」は吹き出しを意味すると思います。次の方法でコールアウトをオフにできます。

$(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"});
于 2014-01-23T20:20:05.243 に答える