41

ユーザーが新しい通知を受け取ったときに通知として使用するリンクがあります。ツールチップ (twitter ブートストラップ ツールチップ) を表示してユーザーに通知します。私が達成したいのは、ユーザーがリンクをクリックするまでツールチップが表示されたままになることです。ユーザーがリンクをクリックすると、ツールチップが破棄されます。これは私が今まで持っているものですhttp://jsfiddle.net/testtracker/QsYPv/

HTML

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

JavaScript

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

そこで何が起こっているかというと、ツールチップはホバーするまで表示されたままになり、ホバーするとデフォルトの動作 (ホバー時に表示) になります。

適切な情報を提供し、やりたいことを明確にしたことを願っています。

4

2 に答える 2

75

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

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

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

次に、この行で 

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

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

于 2012-10-24T09:57:46.810 に答える
4

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

このようにして、マウスを離した後でも、リンクがクリックされるまで、常にツールチップが表示されます。リンクがクリックされると、ツールチップは破棄されますが、マウスを離してもページで JavaScript エラーは生成されません。

于 2012-10-22T18:23:42.487 に答える