定制kendo工具提示的形状

我想定制kendo工具提示的形状为网格。
我在剑道的网站上看到了这个例子，它在箱子外面有箭头，箱子有一个很好的圆形。使用.k-tooltip处理CSS我可以改变宽度，高度，背景。但是我得到一个方框，里面有箭头，有时会覆盖部分文本内容。
我认为标注会有帮助，但我无法获得任何东西。
如何更改箭头的形状，图像和位置，盒子的形状？
此外，只有当网格单元格中的部分文本可见时，如何触发工具提示？
非常感谢任何提示定制kendo工具提示的形状

问候

马尔科

来源

2013-12-13 cortomaltese_marcof

我认为， “箭” 你的意思是标注。您可以通过关闭标注：

$(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-23 20:20:05

真棒的答案。 qq：你正在确定是否使用offsetwidth与scrollWidth显示...，css究竟是如何确定是否显示省略号？只是好奇。谢谢！要清楚，我使用溢出：隐藏;和文本溢出：省略号;在我的网格中显示我的省略号 – snuggles

另外，我对使用'refreshTooltip'做的事情有点不清楚。如果我遵循逻辑，首先将tooltipText设置为''，然后将其设置为您正在盘旋的单元格的文本（如果存在）。但是，然后你检查它是否被设置为“'，如果是，你刷新工具提示？这种检查的目的是什么，如果我是密集的，抱歉，但我剥去了所有这一切，似乎工作正常，但也许我错过了一些东西。非常感谢！ – snuggles

@snuggles。说实话，我不知道CSS是如何决定是否显示省略号，但是我发现如何确定是否存在省略号，并且它始终工作得很好:) –

定制kendo工具提示的形状

回答

相关问题