web-dev-qa-db-ja.com

作成方法bootstrap=ツールチップはリンクがクリックされるまで表示されたままです

ユーザーが新しい通知を受け取ったときに通知として使用するリンクがあります。ツールチップを表示して、ユーザーに通知します（Twitter bootstrap tooltip）。つまり、ユーザーがリンクをクリックするまで、そのツールチップは表示されたままになりますユーザーがリンクをクリックすると、ツールチップは破壊されるはずですこれは私がこれまで持っていたものです /

HTML

<p><a href="#" rel="tooltip" data-original-title="you have 2 notifications">Notification</a>.</p>​

JavaScript

$('p a').tooltip({placement: 'bottom'}).tooltip('show');​

そこに何が起きているのか、ツールヒントはホバーするまで表示され続け、ホバーするとデフォルトの動作（ホバー時に表示）を取ります。

適切な情報を提供し、やりたいことをクリアしたことを願っています。

javascripttwitter-bootstraptooltip
37
vikas devde

ここに解決策があります http://jsfiddle.net/testtracker/QsYPv/8/

オプション「トリガー」を追加しました

$('p a').tooltip({placement: 'bottom',trigger: 'manual'}).tooltip('show');

次に、この行で

$('p a').on('click',function(){$(this).tooltip('destroy');});

クリック時にツールチップを破棄します。

68
vikas devde

Mouseleaveイベントでトリガーする変数を追加してツールチップを再表示し、コメントで述べたように、クリックするとツールチップを破棄するだけで、マウスオーバーしたときに表示されません：

var clickedNotify = false;
$('p a').tooltip({placement: 'bottom'}).tooltip('show');
$('p a').mouseleave(function() { if (!clickedNotify) { $('p a').tooltip({placement: 'bottom'}).tooltip('show'); } });
$('p a').click(function() { clickedNotify = true; $(this).tooltip('destroy'); });

このようにして、リンクがクリックされるまで、mouseleaveの後でも、ツールチップが常に表示されます。リンクがクリックされると、ツールチップは破棄され、mouseleaveのページでjavascriptエラーが生成されなくなります。

4
Nathan Wheeler