Descrizione comando Bootstrap - Nascondere quando un altro suggerimento è fare clic su

Question

Spero che qualcuno possa aiutarti.

Sto tentando di nascondere il suggerimento quando si fa clic su un'altra icona del suggerimento. Funziona ma quando decido di fare nuovamente clic sull'ultimo suggerimento, "lampeggia" il suggerimento.

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> 

Se aiuta un seguito markup viene aggiunto al DOM quando l'utente fa clic sul pulsante per visualizzare il tooltip.

<div class="tooltip"</div> 

Answer 1

È necessario verificare se il suggerimento è visualizzato e attivare la sua visibilità manualmente. Questo è un modo per farlo.

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

Sono andato allo stesso problema per i tooltip regolari. Su un iPhone, non vanno via quando si fa clic sul corpo (cioè da qualche altra parte).

La mia soluzione è che quando si fa clic sul tooltip stesso, si nasconde. IMHO, questo dovrebbe essere integrato nella distribuzione bootstrap, perché è un codice limitato con un grande effetto.

Quando si ha accesso a fonti di bootstrap, aggiunge

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

come l'ultima riga nel metodo Tooltip.prototype.init in tooltip.js file:

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

Se non si ha il fonti a portata di mano, è possibile ottenere lo stesso effetto con il seguente:

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

Per me, questo ci rende buoni er esperienza su un iPhone: fai clic sull'elemento per vedere il suggerimento. Clicca sul tooltip che va via.

Answer 3

Grazie a Jochen per "Iphone" fare clic su suggerimento per chiudere la soluzione, esattamente quello che stavo cercando.

Per quanto riguarda la richiesta originale (evitare multipla fonctionnality tooltip è una necessità evidente quando vi viene chiesto di implementare clic tooltip al posto di quelle di rollover), qui è il mio prendere:

Subito dopo , show: function() { aggiuntivo:

// 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

Questo può essere gestito più facilmente di quanto indicato nelle risposte precedenti. È possibile farlo con una sola riga di JavaScript nel vostro show gestore:

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

Ecco un esempio completo. Cambia "elemento" in modo che corrisponda al tuo selettore.

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

La stessa tecnica è suggerita per la chiusura popovers in questo SO discussione:

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

Answer 5

ero alla ricerca di una soluzione a questo problema come bene e mi sembra che $('.tooltip').not(this).hide(); sarà bypassare qualsiasi bootstrap show, shown, hide o hidden eventi che potresti aver collegato all'elemento di attivazione. Dopo un po 'di riflessione, ho scoperto che il codice seguente consente una gestione un po' più trasparente degli eventi collegati.

Nota: testato solo su firefox e chrome ma dovrebbe funzionare in teoria.

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

esempio violino qui: http://jsfiddle.net/ketwaroo/x6k1h7j4/

Answer 6

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

Answer 7

ho un po 'modificato il codice di kiprainey

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

io uso rimuovere() al posto di hide()