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

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