4

jQuery UI のツールチップ機能を使用したいのですが、要素 (私の場合は画像) をクリックしたときにツールチップが開いたままになるようにする必要があります。これはできますか？これにはオプションがありませんでした。

http://api.jqueryui.com/tooltip/

ここでの更新は私のコードです。4行目はうまくいくはずだと思っていましたが、残念ながらうまくいきませんでした:

HTML

<img class="jqToolTip" src="/query.gif" title="Text for tool tip here">

Javascript

$('.jqToolTip').tooltip({
    disabled: false    
}).click(function(){    
    $(this).tooltip( "open" );
//  alert('click');
}).hover(function(){
    // alert('mouse in');
}, function(){
    // alert('mouse out');
});
4

2 に答える 2

2

私はまったく同じ問題を解決しようとしていましたが、どこにも答えが見つかりませんでした。4時間以上の検索と実験の後、ようやく機能するソリューションを思いつきました.

私がしたことはこれでした：

  1. 状態がクリックされた場合、すぐに伝播を停止しました
  2. 状態を追跡するためのクリック ハンドラーを追加しました

//This is a naive solution that only handles one tooltip at a time
//You should really move clicked as a data attribute of the element in question
var clicked;
var tooltips = $('a[title]').on('mouseleave focusout mouseover focusin', function(event) {
  if (clicked) {
    event.stopImmediatePropagation();
  }
}).tooltip().click(function() {
  var $this = $(this);
  var isOpen = $this.data('tooltip');
  var method = isOpen ? 'close' : 'open';
  $this.tooltip(method);
  //verbosity for clarity sake, yes you could just use !isOpen or clicked = (method === 'open')
  if (method === 'open') {
    clicked = true;
  } else {
    clicked = false;
  }
  $this.data('tooltip', !isOpen);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/redmond/jquery-ui.css" rel="stylesheet" />
<a href="#" title="That's what this widget is">Tooltips</a>

うまくいけば、これは将来のグーグル社員に役立つでしょう。

この投稿の一部に感謝します

于 2015-04-06T19:22:00.347 に答える
0

http://api.jqueryui.com/tooltip/#method-open

$('img.my-class').click(function() {
    $(this).tooltip( "open" );
}
于 2013-03-27T17:06:31.103 に答える