Jquery multiple tooltips

Question

Tryedは過去2時間に複数のツールチップを取得しましたが、私のプロジェクトの最後の部分はまだできませんでしたので、助けを求めることにしました。

http://titan.maxko.org/?page=search&item=tierのGROUPアイコンをクリックすると画像が表示され、画像上にカーソルを置くと問題はなくなりますが、最初のホバーで行われたようにhtmlタグを変換するのは問題ありません。ツールチップ内の短いツールチップでhtmlタグを変換しないでください。

私のコード：事前に

<script> 
     $(function() { 
      $.widget("ui.tooltip", $.ui.tooltip, { 
       options: { 
        content: function() { 
         return $(this).prop('title'); 
        } 
       } 
      }); 

      $("[title]") 
      .bind("mouseleave", function(event) { 

       var test = $(this).attr('class'); 
       if(test != "group") 
        return; 

       event.stopImmediatePropagation(); 

       var fixed = setTimeout('$("[title]").tooltip("close")', 50); 

       $(".ui-tooltip").hover(
        function(){clearTimeout (fixed);}, 
        function(){$("[title]").tooltip("close");} 
       ); 
      }).tooltip(); 

     }); 
</script> 

感謝。

Answer 1

あなたの挑戦はさまざまな面があるようです。 私は議論するつもりです。https://api.jqueryui.com/1.9/tooltip/

まず、あなたのシナリオでstopPropagationとtooltip.close（）を使う必要はありません。

次を試してください： tooltipcloseなどの指定されたイベントを使用してください。 ハンドラを設定オブジェクト経由で初期化して、ハンドラを初期化します。

あなたは、一般的に、プラグインがフェードアウトまたは類似を処理させるために

$(".selector").tooltip({ 
    hide: { effect: "explode", duration: 1000 } 
}); 

と

$(".selector").tooltip({ 
    show: { effect: "blind", duration: 800 } 
}); 

を使用し、タイムアウトを使用する必要はありません。

エレメントの[タイトル]へのデフォルトのリンケージを、必要なセレクターに変更することができます。例えば。新しく作成された要素の場合

$(".selector").tooltip({ 
    items: "img[alt]" 
}); 

jQuery.on() 

メソッドを使用し、動的に作成 DOM要素にハンドラをバインドします。 http://api.jquery.com/on/を参照してください。これはbind（）が機能しないためです。

一般的に、ユーザーと対話している間は、特定のクラスまたはタイプの新旧すべての要素にハンドラーをバインドすることをお勧めします。

あなたのハンドラ内の現在の要素を参照するために使用

$(this) 

。