focusinが正しく動作していない

Question

jQueryバージョン：1.10.1

リストの各画像アイテムをクリックすると表示されるツールチップを作成しようとしています。しかし、項目をクリックする前に、ホバーマウスを動かすと、のようなHTMLコンテンツがツールチップに表示されます。それはあなたのJavascriptコードとは何の関係もありません

$('#main_8').attr('title', function() { 
 
          //$('#test').attr('title', function() { 
 
          //return "<div> hello </div>"; 
 
          return $("#cat_8").remove().html(); 
 
         }); 
 
         $(document).ready(function (e) { 
 
          $('#main_8').tooltip({ 
 
           //$('#test').tooltip({ 
 
           content: function() { 
 
            return $(this).prop('title'); 
 
           }, 
 
           position: { 
 
            my: 'center bottom', 
 
            at: 'center top-10', 
 
            using: function (position, feedback) { 
 
             $(this).css(position); 
 
             $("<div>") 
 
              .addClass("arrow") 
 
              .addClass(feedback.vertical) 
 
              .addClass(feedback.horizontal) 
 
              .appendTo(this); 
 
            } 
 

 
           }, 
 

 
           disabled: true 
 
          }).on("focusin", function() { 
 
           $(this) 
 
            .tooltip("enable") 
 
            .tooltip("open"); 
 
          }).on("focusout", function() { 
 
           $(this) 
 
            .tooltip("close") 
 
            .tooltip("disable"); 
 
          }); 
 

 
         });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
 

 
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"> 
 
         <div id="main_8" class="tile-video category-item" tabindex="99" title="Hello"> 
 
          <a class="thumb" data-method="cat_8"> 
 
           <img src="/Content/CmsContent/VideoIcons/no-image-small.jpg"> 
 
          </a> 
 
          <h3> 
 
           <a data-method="cat_8"> \t Innovation &amp; Succession Planning Series \t </a> 
 
          </h3> 
 
         </div> 
 

 
        </div> 
 
<div id="cat_8"> 
 
<b>This is cat 8</b> 
 

 
</div>

Answer 1

focusinとfocusoutを呼び出す前メインdivのツールチップを無効にしてみてください。下記のサンプルコードをご覧ください：

$('#main_8').attr('title', function() { 
    $(this).tooltip({disabled:true}); 
    return $("#cat_8").remove().html(); 
}); 

うまくいけば、あなたにとって有益です。

Answer 2

：以下の私の試みを参照してください。問題はあなたのHTMLです。あなたは持っている：

<div id="main_8" class="tile-video category-item" tabindex="99" title=" 

最後の引用は、タイトル文字列を開始し、すべてDIVのタイトルとして取られている。このライン

</div><!-- div.list-sub-category --> 
"> 

まで。したがって、DIVの上にマウスを置くと、そのHTMLテキストがすべて表示されます。

ここに通常のタイトルを入れ、すべてのHTMLを中間に修正する必要があります。そのため、属性を囲むすべての引用符の代わりにHTMLエンティティを使用しません。