Kendo 中自定义按钮的鼠标悬停事件工具提示？

Question

我创建了一个 Kendo 网格编辑按钮，如下所示：

command: [{
    name: "MyEdit",
    click: myFunc,
    template: "<a id= 'myEdit' class='k-grid-MyEdit k-button'><span class='k-icon k-i-edit'></span></a>"
}]

我的要求是当我将鼠标悬停在按钮上时，应该显示 kendo 工具提示。由于kendo命令自定义按钮没有内置onmouseover或onhover事件，我找到了以下触发onmouseover事件的解决方案：

$(grid.element).on("mouseover mouseenter", ".k-grid-MyEdit", function(e) {
   alert("Hello"); //this works   
   //implement tooltip here
});

我尝试实现 kendo 工具提示，但无法销毁它。请帮帮我。

Answer 1

您不需要实现自己的工具提示机制：您可以直接使用 Kendo UI tooltip。

要向按钮添加工具提示，请添加以下声明：

$(grid.element).kendoTooltip({
    filter: ".k-grid-MyEdit",
    width: 120,
    position: "top", 
    content: 'My tooltip'
});

工作原理如下：

• 您在元素上创建一个 kendoTooltip，其中包含您想要在工具提示上显示的任何元素（这里是您的网格）
• filter 属性是一个选择器：工具提示将显示在与选择器匹配的所有子元素上（这里是您的按钮）
• content 属性是您要在工具提示中显示的内容（也可以是模板）

我创建了一个 jsFiddle 来演示：https://jsfiddle.net/7ue2zq45/1/