web-dev-qa-db-ja.com

jquery uiツールチップマニュアルオープン/クローズ

jquery uiツールチップを手動で開いて閉じる方法はありますか？クリックイベントのオン/オフの切り替えに反応させたいだけです。初期化せずに.tooltip（ 'open'）を実行しようとすると、文句を言うので、すべてのマウスイベントをバインド解除でき、.tooltip（ 'open'）を呼び出したときにそれらを再バインドします。初期化されていないことについて大声で。

jquery-uitooltip
20
Funkodebat

jltwoo、自動オープンと自動クローズを有効にするために2つの異なるブールスイッチを使用することを提案できますか？この変更により、コードは次のようになります。

(function( $ ) {
  $.widget( "custom.tooltipX", $.ui.tooltip, {
    options: {
        autoShow: true,
        autoHide: 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 ) );

このようにして、ツールチップを次のように初期化します。

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

マウスを要素の上に置くと、それ自体が表示されますが、手動で閉じる必要があります。

開くアクションと閉じるアクションの両方を手動で制御する場合は、次のように使用できます。

$(someDOM).tooltipX({ autoShow:false, autoHide:false });
13
MscG

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

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

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

mouseoutマウスカーソルを移動してツールトップが非表示になるのをブロックします

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

11
Felix

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

$('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');
});
7
jd_7

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

Edit：@HscとautoShowは、@ MscGによって提案された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

簡単な修正プログラム、公式のプルリクエストを実行する時間があるまで、これは実行する必要があります。

5
jltwoo

他の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();
});
0
aleha