34

誰かが助けてくれることを願っています。

別のツールチップ アイコンがクリックされたときにツールチップを非表示にしようとしています。それは機能しますが、最後のツールチップをもう一度クリックすると、ツールチップが「点滅」します。

var Hastooltip = $('.hastooltip');
HasTooltip.on('click', function(e) {
     e.preventDefault();
     HasTooltip.tooltip('hide');
}).tooltip({
     animation: true
}).parent().delegate('.close', 'click', function() {
     HasTooltip.tooltip('hide');
});

HTML

<a href="#" class="hastooltip" data-original-title="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">
    <h3>Info 1</h3>
</a>

<a href="#" class="hastooltip" data-original-title="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">
    <h3>Info 2</h3>
</a>

ユーザーがボタンをクリックしてツールチップを表示すると、次のマークアップが DOM に追加されます。

<div class="tooltip"</div>
4

9 に答える 9

54

これは、上記の回答が示すよりも簡単に処理できます。これは、ショー ハンドラーで 1 行の JavaScript を使用して行うことができます。

$('.tooltip').not(this).hide();

これが完全な例です。セレクターに合わせて「要素」を変更します。

$(element).on('show.bs.tooltip', function() {
    // Only one tooltip should ever be open at a time
    $('.tooltip').not(this).hide();
});

この SO スレッドでは、ポップオーバーを閉じるために同じ手法が提案されています。

ページのどこからでもクリックして Twitter Bootstrap ポップオーバーを閉じるにはどうすればよいですか?

于 2014-09-15T15:25:31.777 に答える
14

ツールチップが表示されているかどうかを確認し、その表示を手動で切り替える必要があります。これは 1 つの方法です。

$(function() {
  var HasTooltip = $('.hastooltip');
  HasTooltip.on('click', function(e) {
    e.preventDefault();
    var isShowing = $(this).data('isShowing');
    HasTooltip.removeData('isShowing');
    if (isShowing !== 'true')
    {
      HasTooltip.not(this).tooltip('hide');
      $(this).data('isShowing', "true");
      $(this).tooltip('show');
    }
    else
    {
      $(this).tooltip('hide');
    }

  }).tooltip({
    animation: true,
    trigger: 'manual'
  });
});
于 2013-06-24T17:55:03.947 に答える
5

kipraneyのコードを少し修正しました

const $tooltip = $('[data-toggle="tooltip"]');
 $tooltip.tooltip({
   html: true,
   trigger: 'click',
   placement: 'bottom',
 });
 $tooltip.on('show.bs.tooltip', () => {
   $('.tooltip').not(this).remove();
 });

hide() の代わりに remove() を使用します

于 2017-06-24T02:40:12.347 に答える
1 
$('[data-toggle=tooltip],[rel=tooltip]').tooltip({ 
        container: 'body' }).click(function () {
        $('.tooltip').not(this).hide();
    });
于 2016-06-24T08:27:04.507 に答える
0

良い解決策とボーナスを差し上げます

        //save the tooltip in variable (change the selector to suit your tooltip)
        var $tooltips = $('a[data-toggle="tooltip"]');
        
        //initialise the tooltip with 'click' trigger  
        $tooltips.tooltip({
            animated: 'fade',
            placement: 'top',
            trigger: 'click',
            delay: { "show": 100, "hide": 100 }
        });
        
        //Here is the juicy bit: when a tooltip is opened it 
        //it creates an 'aria-describedby' with the id of the tooltip
        //opened we can leverage this to turn off all others but current

        $tooltips.on('click', function () {
            var toolTipId = $(this).attr('aria-describedby');
            $('.tooltip').not('#'+ toolTipId).tooltip('hide');
        });

        //But wait theres more! if you call now we chuck in a free close on X seconds event!
        $tooltips.on('shown.bs.tooltip', function (e) {
            //Auto hide after 7 seconds
            setTimeout(function () {
                $(e.target).tooltip('hide');
            }, 7000);
        });

        //call now! XD
于 2020-06-23T04:23:26.263 に答える