Question

问题：我正在为剑道工具提示的内容属性分配div ...问题是，当我附加工具提示时... div正坐在那里，并且工具提示不会真正连线，直到我将鼠标悬停在我附加的元素...你可以在下面的代码中看到它是如何工作的......粘贴到一个kendo dojo，并且看到....只需单击按钮（不要在文本框上方放置） ..然后你会看到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>

Answer 1

div显示，因为它是可见的，你只是使其内容非空白。一旦工具提示显示一次，kendo就会接管控制并将其包装在它隐藏的另一个div中，并在必要时显示。请注意＆＃34; aria-hidden：true＆＃34;实际上并没有隐藏div ...它只是屏幕阅读器的指令......你仍然必须使用真正的CSS来隐藏div。

你需要确保最初隐藏div（在kendo包装之前）并删除display：none;一旦你把它交给了＃34;到剑道。

或者......隐藏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

将内容字段设置为div元素时..具有附加和可见性问题

1 个答案: