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

您需要检查工具提示是否显示并手动切换其可见性。这是做到这一点的一种方式。

$(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 2

我对常规工具提示进入了相同的问题。在iPhone上，点击身体（即其他地方）时，它们不会消失。

我的解决方案是，当你点击工具提示本身时，它就隐藏起来。恕我直言，这应该集成在bootstrap分发中，因为它很少有很大影响的代码。

当你有机会来引导人士透露，在文件中添加tooltip.js

this.tip().click($.proxy(this.hide, this)) 

如方法Tooltip.prototype.init的最后一行：

Tooltip.prototype.init = function (type, element, options) { 
this.enabled = true 
this.type  = type 
this.$element = $(element) 
this.options = this.getOptions(options) 

var triggers = this.options.trigger.split(' ') 

for (var i = triggers.length; i--;) { 
    var trigger = triggers[i] 

    if (trigger == 'click') { 
    this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this)) 
    } else if (trigger != 'manual') { 
    var eventIn = trigger == 'hover' ? 'mouseenter' : 'focus' 
    var eventOut = trigger == 'hover' ? 'mouseleave' : 'blur' 

    this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this)) 
    this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this)) 
    } 
} 

this.options.selector ? 
    (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) : 
    this.fixTitle() 

// Hide tooltip when clicking on it. Useful for mobile devices like iPhone where eventOut 
// (see above) on $element is not triggered and you don't get rid of the tooltip anymore. 
this.tip().click($.proxy(this.hide, this)) 
    } 

如果没有在手头上，你可以用下面的方法达到同样的效果：

$(function() 
    { 
     // Apply tooltips 
     var hasTooltip = $("[data-toggle='tooltip']").tooltip(); 

     // Loop over all elements having a tooltip now. 
     hasTooltip.each(function() 
      { 
       // Get the tooltip itself, i.e. the Javascript object 
       var $tooltip = $(this).data('bs.tooltip'); 

       // Hide tooltip when clicking on it 
       $tooltip.tip().click($.proxy($tooltip.hide, $tooltip)) 
      } 
     ); 
    }); 

对我来说，这样做对我们很好呃在iPhone上体验：点击元素查看工具提示。点击它消失的工具提示。

Answer 3

感谢Jochen为“Iphone”点击工具提示来关闭解决方案，正是我所期待的。

至于原请求（防止多提示fonctionnality显然需要当你被要求实现点击工具提示，而不是翻转的），这里是我的看法：

刚过, show: function() {地址：

// HACK BEGIN 
    // Quick fix. Only one tooltip should be visible at all time. 
    // prototype level property are accessible to all instances so we use one to track last opened tooltip (ie. current this). 
    if ((Tooltip.prototype.currentlyShownTooltip != null) || (Tooltip.prototype.currentlyShownTooltip != undefined)) { 
    // Close previously opened tooltip. 
    if (Tooltip.prototype.currentlyShownTooltip != this) { // Conflict with toggle func. Re-show. 
     Tooltip.prototype.currentlyShownTooltip.hide(); 
     Tooltip.prototype.currentlyShownTooltip = null 
    } 
    } 
    // Keep track of the currently opened tooltip. 
    Tooltip.prototype.currentlyShownTooltip = this 
    // HACK END 

Answer 4

这可以比上面的答案更容易处理。您可以在演出处理程序中使用单行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线程关闭popovers：

How can I close a Twitter Bootstrap popover with a click from anywhere (else) on the page?

Answer 5

我一直在寻找一个解决这个问题，以及它在我看来，$('.tooltip').not(this).hide();将绕过任何引导程序show,shown，hide或hidden您可能已附加到触发器元素的事件。经过一番思考，我想出了下面的代码，可以更加透明地处理附加事件。

注意：仅在firefox和chrome上进行测试，但理论上应该正常工作。

$(document).ready(function() { 
 

 
    $('[data-toggle="popover"]').popover(); 
 

 

 
    $(document).on('show.bs.popover', function(event) { 
 
    // could use [data-toggle="popover"] instead 
 
    // using a different selector allows to have different sets of single instance popovers. 
 
    $('[data-popover-type="singleton"]').not(event.target).each(function(key, el) { 
 
     $(el).popover('hide'); // this way everything gets propagated properly 
 
    }); 
 
    }); 
 

 
    $(document).on('click', function(event) { 
 
    // choose to close all popovers if clicking on anything but a popover element. 
 
    if (!($(event.target).data('toggle') === "popover" /* the trigger buttons */ 
 
      || $(event.target).hasClass('popover') /* the popup menu */ 
 
      || $(event.target).parents('.popover[role="tooltip"]').length /* this one is a bit fiddly but also catches child elements of the popup menu. */)) { 
 
     
 
     $('[data-toggle="popover"]').popover('hide'); 
 
    } 
 
    }); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 

 
<button type="button" class="btn btn-danger" data-placement="bottom" data-toggle="popover" title="Popover One" data-content="Popover One Content. `focus` trigger still behaves as expected" data-trigger="focus" data-popover-type="singleton">Popover One</button> 
 

 
<button type="button" class="btn btn-warning" data-placement="bottom" data-toggle="popover" title="Popover Two" data-content="Popover Two Content. for other triggers, clicking on content does not close popover" data-trigger="click" data-popover-type="singleton">Popover Two</button> 
 

 
<button type="button" class="btn btn-success" data-placement="bottom" data-toggle="popover" title="Popover Three" data-content="Popover Three Content. clicking outside popover menu closes everything" data-trigger="click" data-popover-type="singleton">Popover Three</button>

拨弄例如这里：http://jsfiddle.net/ketwaroo/x6k1h7j4/

Answer 6

$('[data-toggle=tooltip],[rel=tooltip]').tooltip({ 
     container: 'body' }).click(function() { 
     $('.tooltip').not(this).hide(); 
    }); 

Answer 7

我稍微修改kiprainey的代码

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

我用除去（）而不是隐藏（）