Bootstrap Tooltip - Скрыть, когда нажимается другая подсказка

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

Вам нужно проверить, отображается ли всплывающая подсказка и вручную переключить ее видимость. Это один из способов сделать это.

Answer 2

Я пошел в ту же проблему для регулярных всплывающих подсказок. На iPhone они не исчезают при нажатии на тело (то есть в другом месте).

Мое решение состоит в том, что когда вы нажимаете на всплывающую подсказку, она скрывается. IMHO, это должно быть интегрировано в дистрибутив начальной загрузки, потому что это мало кода с большим эффектом.

Если у вас есть доступ к загрузился источников, добавить

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

в качестве последней строки в методе Tooltip.prototype.init в файле tooltip.js:

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

Для меня это делает нас хорошими er на 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(); 
}); 

Тот же метод предлагается для закрытия Popovers в этом SO нить:

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

Answer 5

Я искал решение этой проблемы, а также и мне кажется, что $('.tooltip').not(this).hide(); обойдет любой bootstrap 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(); 
}); 

Я использую удалить() вместо того, чтобы скрывать()