jquery-ui - jquery ui ツールチップ 手動で開く/閉じる

Question

jquery ui ツールチップを手動で閉じる方法はありますか? オン/オフを切り替えるクリックイベントに反応させたいだけです。初期化せずに .tooltip('open') を実行しようとすると、エラーが発生するため、すべてのマウス イベントをバインド解除できます。初期化されていないことについて大声で。

Answer 1

イベントのバインドを解除するだけで、独自のカスタム ツールチップを作成したくない場合。

$("#some-id").tooltip(tooltip_settings)
             .on('mouseout focusout', function(event) {
                  event.stopImmediatePropagation();
             });

$("#some-id").attr("title", "Message");
$("#some-id").tooltip("open");

mouseoutは、マウス カーソルの移動によるツールトップの非表示をブロックします。

focusoutは、キーボード ナビゲーションによるツールトップの非表示をブロックします。

Answer 2

ツールチップには無効化オプションがあります。さて私はそれを使用しました、そしてここにコードがあります：

$('a').tooltip({
    disabled: true    
}).click(function(){    
    if($(this).tooltip('option', 'disabled'))
        $(this).tooltip('option', {disabled: false}).tooltip('open');
    else
        $(this).tooltip('option', {disabled: true}).tooltip('close');
}).hover(function(){
    $(this).tooltip('option', {disabled: true}).tooltip('close');
}, function(){
    $(this).tooltip('option', {disabled: true}).tooltip('close');
});

Answer 3

私の他のコメントに関連して、元のコードを調べ、ウィジェットを拡張し、バージョン JQuery-UI v1.10.3 で autoHide オプションを追加することで、手動で開閉を実現しました。基本的に、_create と内部の _open 呼び出しで追加されたマウス リスナーを削除するだけです。

編集: @MscG で提案されているように、autoHide と autoShow を 2 つの個別のフラグとして分離しました。

デモはこちら: http://jsfiddle.net/BfSz3/

(function( $ ) {
  $.widget( "custom.tooltipX", $.ui.tooltip, {
    options: {
      autoHide:true,
      autoShow: true
    },

    _create: function() {
      this._super();
      if(!this.options.autoShow){
        this._off(this.element, "mouseover focusin");
      }
    },

    _open: function( event, target, content ) {
      this._superApply(arguments);

      if(!this.options.autoHide){
        this._off(target, "mouseleave focusout");
      }
    }
  });

}( jQuery ) );

初期化するときに、autoHide : false を設定することで、ツールチップを手動で表示または非表示に設定できます。

 $(someDOM).tooltipX({ autoHide:false }); 

そして、他の場所で必要に応じて、コード内で標準のオープン/クローズ呼び出しを直接実行するだけです

 $(someDOM).tooltipX("open"); // displays tooltip
 $(someDOM).tooltipX("close"); // closes tooltip

簡単なホットフィックスです。公式のプル リクエストを行う時間ができるまで、これを行う必要があります。

Answer 4

他のSOの質問からのいくつかのコンパイル。

例クリックで ツールチップをhint表示し、それ以外のクリックでツールチップを非表示にする

$(document).on('click', '.hint', function(){ //init new tooltip on click
   $(this).tooltip({
      position: { my: 'left+15 center', at: 'center right' },
      show: false,
      hide: false
   }).tooltip('open'); // show new tooltip
}).on('click', function(event){ // click everywhere
   if(!$(event.target).hasClass('hint'))
     $(".hint").each(function(){
        var $element = $(this);
        if($element.data('ui-tooltip')) { // remove tooltip only from initialized elements
           $element.tooltip('destroy');
        }
     })
});

$('.hint').on('mouseout focusout', function(event) { // prevent auto hide tooltip 
    event.stopImmediatePropagation();
});