0

问题：我正在将一个 div 分配给剑道工具提示的 content 属性...问题是，当我附加工具提示时... div 坐在那里，并且工具提示在我将鼠标悬停在我的元素上之前并没有真正连接起来将其附加到...您可以在下面的代码中看到它是如何不起作用的...粘贴到剑道道场中，然后看到...只需单击按钮（请勿将鼠标悬停在文本框上）...然后你会看到 div 出现了，当你将鼠标悬停在文本框上时，它会做它应该做的事情......我做了一个解决方法，它被注释掉了......但它闪烁了一秒钟......是有没有办法让工具提示连接起来并隐藏内容 div？

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.mobile.all.min.css">
    <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2017.1.223/js/angular.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2017.1.223/js/jszip.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
  </head>
  <body>
    <div id="view" data-bind="enabled: isNameEnabled">
      <button id="button1" data-bind="click: updateTooltip">Change Tooltip</button>
      <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
      <input id="text1" type="text" data-bind="value: name" />
      <div id="toolTipDiv"></div>
    </div>
    <script>
      var viewModel = kendo.observable({
        isNameEnabled: false,
        name: "John Doe",
        updateTooltip: function () {
          var kendoToolTip = window.toolTipEl.data("kendoTooltip");
          // comment this out to see
          //div1.hide();
          //kendoToolTip.show();
          //kendoToolTip.hide();
          //div1.show();
          //end comment
          div1.text(text1.value);
        }
      });
      var div1 = $("#toolTipDiv");

      window.toolTipEl = $("#text1");
      kendo.bind($("#view"), viewModel);
      window.toolTipEl.kendoTooltip({
        content: div1, position: "top",autohide:true
      });

    </script></body>
</html>
4

1 回答 1

0

显示 div 是因为它是可见的，并且您只是将其内容设置为非空白。一旦工具提示显示一次，kendo 就会接管控制并将其包装在另一个 div 中，它会根据需要隐藏和显示。请注意，“aria-hidden: true”实际上并没有隐藏 div...它只是对屏幕阅读器的指令...您仍然必须实际使用真正的 CSS 来隐藏 div。

您需要确保 div 最初是隐藏的（在 kendo 包装它之前）并删除 display: none; 一旦你将它“交给”剑道。

或者...隐藏 div 并将内容设置为只返回 div 内容而不是绑定到 div 本身的函数，即

<div id="toolTipDiv" aria-hidden="true" style="display: none"></div>
...
updateTooltip: function () {
      div1.text(text1.value);
}
...
window.toolTipEl.kendoTooltip({
    content: function(e) {
      return div1.text();
    },

示例：http ://dojo.telerik.com/@Stephen/iqaLA

更新 结果表明，内容仅在第一次显示元素提示时才被调用，而不是每次显示工具提示时，因此对内容（甚至输入的标题属性）的动态更改不会更改工具提示。

所以，忽略我的回答，试试这个：http ://www.telerik.com/forums/dynamic-content-de3951ae5752

于 2017-05-04T18:50:23.217 回答