div要素にコンテンツフィールドを設定すると、添付と可視性に問題がある

問題：剣道ツールチップのコンテンツプロパティにdivを割り当てています...問題は、ツールチップを添付したとき... divそこに座っていると、ツールチップは、私がそれをつけた要素にマウスを置くまで、本当にワイヤーアップしていません...あなたは下のコードで、これがどういうわけではないのかを見ることができます...剣道道場に貼り付けると、.. ..ボタンをクリックするだけで（まだテキストボックスの上に置かないでください）、次に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>

出典

2017-05-04 ttomsen

divは表示され、その内容を空白にしたため表示されます。ツールヒントが一度表示されると、剣道はコントロールを引き継ぎ、必要に応じて隠して表示する別のdivでラップします。「aria-hidden：true」は実際にdivを隠すわけではありません...単にスクリーンリーダーの指示です... divを隠すのに実際のCSSを実際に使用する必要があります。

最初にdivを非表示にして（剣道を巻き戻す前に）、表示を削除する必要があります。かつて剣道に "手渡す"。

それとも... 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

更新コンテンツが最初に表示されるのは、ツールチップが表示されるたびに表示されるのではなく、内容（または入力のタイトル属性）の動的な変更によってツールヒントが変更されることはない。

だから、私の答えを無視し、この試してみてください。「ARIA-隠さ：真の」というhttp://www.telerik.com/forums/dynamic-content-de3951ae5752

出典

2017-05-04 18:50:23

をいくつかのテストだった、私はそれを削除した...私はリフレッシュを使用している、それは問題ではありません。..置きます剣道道場のテキストを試してみて、それを提案する前にあなたの提案がうまくいっているかどうか確認してください。私はその道を見つけることができません。 – ttomsen

あなたはこういう意味です：http://dojo.telerik.com/ @ Stephen/aHeQE？私の元の提案はあなたの質問に*記載されているように問題を解決します。私のアップデート（正しく使用すると機能します）は、あなたの質問に指定されているワンタイムのみの変更ではなく、真にダイナミックなツールチップの実装を容易にすることでした。 –

div要素にコンテンツフィールドを設定すると、添付と可視性に問題がある

答えて

関連する問題