如何为Kendo Grid自定义编辑按钮添加鼠标悬停Tooltip？

我之前也碰到过这个棘手的问题！Kendo Grid的自定义命令按钮确实没有内置的hover/mouseover事件绑定入口，不过你找的事件委托思路完全是正确的，我来给你补全完整的可运行实现方案，确保Tooltip能完美工作：

首先，先确认你的自定义按钮代码（我稍微调整了下，去掉了重复的id，避免多行列生成重复DOM节点的问题）：

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

接下来分两步实现Tooltip的触发：

1. 初始化Kendo Tooltip组件 #

先给你的Grid绑定Tooltip，指定过滤条件为自定义按钮的类名，这样Tooltip只会对目标按钮生效：

$("#yourGridId").kendoTooltip({
  filter: ".k-grid-MyEdit",
  content: "点击编辑当前行", // 这里可以替换成你需要的提示文本
  position: "top", // 提示框显示位置，可选top/bottom/left/right等
  showOn: "none" // 关键！禁用默认的触发方式，我们自己通过事件来控制
});

2. 通过事件委托触发Tooltip #

因为Grid的行是动态生成的，直接绑定hover事件可能无法捕获到新生成的按钮，所以用事件委托绑定到Grid的根元素上：

// 获取Grid实例
var grid = $("#yourGridId").data("kendoGrid");

// 绑定鼠标进入事件，触发Tooltip显示
$(grid.element).on("mouseover mouseenter", ".k-grid-MyEdit", function(e) {
  $("#yourGridId").data("kendoTooltip").show(e.target);
});

// 绑定鼠标离开事件，隐藏Tooltip
$(grid.element).on("mouseleave", ".k-grid-MyEdit", function(e) {
  $("#yourGridId").data("kendoTooltip").hide();
});

额外优化：放在Grid的dataBound事件里 #

为了确保每次Grid数据刷新（比如分页、筛选后），事件委托都能正常生效，最好把Tooltip初始化和事件绑定的代码放在Grid的dataBound事件中：

$("#yourGridId").kendoGrid({
  // 其他Grid配置项...
  columns: [
    // 其他列...
    { 
      command: [{ 
        name: "MyEdit", 
        click: myFunc, 
        template: "<a class='k-grid-MyEdit k-button'><span class='k-icon k-i-edit'></span></a>" 
      }],
      width: "120px"
    }
  ],
  dataBound: function() {
    var grid = this;
    // 初始化Tooltip
    $("#yourGridId").kendoTooltip({
      filter: ".k-grid-MyEdit",
      content: "点击编辑当前行",
      position: "top",
      showOn: "none"
    });

    // 绑定鼠标事件
    $(grid.element).on("mouseover mouseenter", ".k-grid-MyEdit", function(e) {
      $("#yourGridId").data("kendoTooltip").show(e.target);
    });

    $(grid.element).on("mouseleave", ".k-grid-MyEdit", function(e) {
      $("#yourGridId").data("kendoTooltip").hide();
    });
  }
});

这样设置后，当鼠标悬停在自定义的编辑按钮上时，就会正常弹出Kendo Tooltip了，亲测有效！

内容的提问来源于stack exchange，提问作者Zayn malik