Bootstrap工具提示 - 单击另一个工具提示时隐藏

Question

我希望有人能帮帮忙.

当我点击另一个工具提示图标时,我正试图隐藏工具提示.它有效,但当我决定再次点击最后一个工具提示时,它会"闪烁"工具提示.

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>

Answer 1

这可以比上面的答案更容易处理.您可以在show handler中使用一行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 popover？

Answer 2

您需要检查工具提示是否正在显示并手动切换其可见性.这是一种方法.

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

Answer 3

我稍微修改了kiprainey的代码

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

我使用remove（）而不是hide（）