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

Question

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

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 命令自定义按钮没有内置的 onmouseover 或onhover事件，我找到了以下解决方案来触发onmouseover事件：

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

我尝试实现剑道工具提示，但无法破坏它。请帮帮我。

Answer 1

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

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

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

以下是它的工作原理：

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

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