Kendo UI Button图标Tooltip绑定失效问题及生效示例

问题原因 #

当你用kendoButton()初始化按钮时，Kendo会重构按钮的DOM结构——它会把原生的<button>元素替换成带有.k-button类的容器（通常是<span>），原来的图标元素也会被重新嵌套。这就导致你原来的Tooltip选择器button[tooltip] > span完全匹配不到目标元素了，因为按钮已经不是<button>标签，图标也不再是直接子元素。

而原生按钮没有被Kendo重构，所以你的选择器能正常工作。

解决方案 #

你需要做两个关键调整：

• 调整Tooltip的filter选择器，适配Kendo Button渲染后的DOM结构
• 确保Tooltip在Kendo Button初始化之后创建

修改后的完整代码示例 #

HTML

<!DOCTYPE html>
<html>
<head>
  <style>
    html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }
  </style>
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common-bootstrap.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.bootstrap.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.bootstrap.mobile.min.css" />
  <script src="https://kendo.cdn.telerik.com/2018.2.516/js/jquery.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>
</head>
<body>
  <div id="example">
    <div class="demo-section k-content">
      <div>
        <h4>Basic Button</h4>
        <p>
          <button id="primaryTextButton" class="k-primary" tooltip="Example of tool tip">Primary Button</button>
          <button id="textButton" tooltip="Tooltip for regular button">Button</button>
        </p>
      </div>
    </div>
  </div>
</body>
</html>

JavaScript

$(document).ready(function() {
  // 先初始化所有Kendo Buttons，让DOM结构完成渲染
  $("#primaryTextButton").kendoButton({ icon: "filter-clear" });
  $("#textButton").kendoButton({ icon: "filter-clear" });

  // 再初始化Tooltip，适配Kendo渲染后的结构
  var tooltip = $("#example").kendoTooltip({
    // 匹配带有tooltip属性的Kendo按钮下的图标元素
    filter: ".k-button[tooltip] .k-icon",
    position: "top",
    content: function(e) {
      // 用closest()可靠找到带tooltip属性的根按钮元素
      return e.target.closest(".k-button").attr("tooltip");
    },
    show: function() {
      console.log("Tooltip shown");
    },
    hide: function() {
      console.log("Tooltip hidden");
    }
  });
});

CSS

.demo-section p { margin: 0 0 30px; line-height: 50px; }
.demo-section p .k-button { margin: 0 10px 0 0; }
.k-primary { min-width: 150px; }

关键调整说明 #

1. 选择器修改：把filter: "button[tooltip] > span"改成filter: ".k-button[tooltip] .k-icon"，因为Kendo生成的按钮根元素带.k-button类，图标元素带.k-icon类，而且原按钮的tooltip属性会被保留在.k-button元素上。
2. 获取tooltip内容：用e.target.closest(".k-button")代替target.parent()，因为Kendo按钮的DOM层级更深，closest()能更可靠地找到带tooltip属性的根按钮元素。
3. 初始化顺序：必须先初始化Kendo Button，再初始化Tooltip——否则Tooltip会找不到还没渲染出来的Kendo按钮结构。

这样调整后，鼠标悬停在Kendo Button的图标上时，Tooltip就能正常显示了。

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