将内容字段设置为DIV元素时.存在依从性和可见性问题

问题：我将DIV分配给Kendo Tooltip的内容属性...问题是，当我附加了工具提示时... 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>

div显示出来，因为它是可见的，而您只是将其内容不合时宜。一旦显示了一次工具提示，Kendo就接管了控制并将其包裹在另一个Div中，其隐藏并在必要时显示。请注意，" Aria Hinded：True"实际上并没有隐藏Div ...它只是屏幕阅读器的指示...您仍然必须实际使用真实的CSS来隐藏Div。

您需要确保最初隐藏DIV(在Kendo包装之前(并删除显示：无；一旦您将其交给Kendo。

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

更新事实证明，内容仅在第一次显示元素显示的提示时才被调用，而不是每次显示工具提示时，因此对内容的动态更改(甚至输入的标题属性(都不会更改工具提示。p>所以，请忽略我的答案，然后尝试以下操作：http：//www.telerik.com/forums/dynamic-content-de3951ae5752

相关内容

最新更新

热门标签：