Il suggerimento di Bootstrap non scompare dopo aver fatto clic sul pulsante e lasciato il mouse

Ho un problema con il suggerimento di bootstrap: quando clicco su un pulsante, il suggerimento rimane anche se il cursore si trova all'esterno del pulsante. Ho esaminato il manuale - il suggerimento di Bootstrap e se faccio clic sui pulsanti, vedo lo stesso problema. C'è qualche soluzione per risolvere questo problema? Ho appena provato nell'ultimo FF, IE.

Questo perché triggernon è impostato. Il valore predefinito per il trigger è 'hover focus', quindi la descrizione comando rimane visibile dopo aver fatto clic su un pulsante, finché non viene fatto clic su un altro pulsante, perché il pulsante lo è focused.

Quindi tutto ciò che devi fare è definire triggercome 'hover'unico. Di seguito lo stesso esempio a cui ti sei collegato senza persistere i suggerimenti dopo aver fatto clic su un pulsante:

$('[data-toggle="tooltip"]').tooltip({
    trigger : 'hover'
})  

l'esempio del documento in un violino -> http://jsfiddle.net/vdzvvg6o/

Conosco più di un anno, ma non sono riuscito a farlo funzionare con nessun esempio qui. Ho dovuto usare quanto segue:

$('[rel="tooltip"]').on('click', function () {
    $(this).tooltip('hide')
})

Questo mostra anche il tooltip di nuovo al passaggio del mouse.

Ciao, ho una piccola soluzione per questo problema. Quando altre soluzioni non funzionano, prova questa:

$('body').tooltip({
        selector: '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])',
        trigger: 'hover',
        container: 'body'
    }).on('click mousedown mouseup', '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])', function () {
        $('[data-toggle="tooltip"], [title]:not([data-toggle="popover"])').tooltip('destroy');
    });

Questa è una soluzione anche per il drag and drop. Quindi spero che questo aiuti qualcuno :)

Nel mio caso il problema è stato riprodotto solo in Internet Explorer: non importa quale elemento (input, div ecc ...) ha il tooltip - se cliccato - il tooltip rimane mostrato.

ho trovato alcune soluzioni sul web che consiglia .hide () quel suggerimento sugli elementi Evento Click- ma è una pessima idea- tornare con il mouse sullo stesso elemento - lo tiene nascosto ... nel mio caso

$('.myToolTippedElement').on('click', function () {
    $(this).blur()
})

ha fatto tutta la magia !!! - dove .myToolTippedElement è l'elemento che ha un tooltip diCourse ...

in angular 7 con bootstrap 4 e jquery ho trovato questo e funziona bene. Ho usato dispose perché distrugge non nasconde il tooltip.

  ngAfterViewChecked() {
    $('[data-toggle="tooltip"]').tooltip({
      trigger: 'hover'
    });
    $('[data-toggle="tooltip"]').on('mouseleave', function () {
      $(this).tooltip('dispose');
    });
    $('[data-toggle="tooltip"]').on('click', function () {
      $(this).tooltip('dispose');
    });
   }

Prova a usare rel="tooltip"invece di quello data-toggle="tooltip"che ha funzionato nel mio caso. Stavo usando data-toggle="tooltip"e ho anche impostato la condizione di attivazione come hover che non ha funzionato nel mio caso. Quando ho cambiato il selettore dei dati, ha funzionato.

Codice HTML:

<button id="submit-btn" type="submit" class="btn btn-success" rel="tooltip" title="Click to submit this form">Submit</button>

Codice JS // Tooltip $ ('. Btn'). Tooltip ({trigger: 'hover'});

Questo rimuoverà definitivamente il tooltip bloccato.

La risposta di David sopra ha aiutato a risolvere il mio problema. Avevo sia l'evento al passaggio del mouse che quello clic sul pulsante. Firefox su MAC si è comportato come volevo. Cioè, mostra il suggerimento al passaggio del mouse, non mostrare il suggerimento per il clic. Su altri browser e sistemi operativi, quando faccio clic, il suggerimento viene visualizzato e rimane come mostrato. Anche se sposto il mouse su altri pulsanti per il passaggio del mouse. Questo è quello che avevo:

$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true}); 

Questa è la soluzione:

$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true, trigger: 'hover'}); 

Inoltre puoi aggiungere:

onclick="this.blur()"

Soluzione funzionante

$(document).on("click",function()
    {
    setTimeout(function()
    {

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

},500);    // Hides tooltip in 500 milliseconds
    });

Il modo in cui ho risolto questo problema è stato rimuovendo la descrizione comando nella funzione evento clic utilizzando il codice seguente:

$("#myButton").on("click", function() {
    $("div[role=tooltip]").remove();
});

Sto usando il tooltip bootstrap in cycle.js e nessuno dei precedenti ha funzionato per me.

Ho dovuto fare questo:

return button( selector + '.btn.btn-sm', 
             {
               hook: {
                 destroy: tooltipOff,
                 insert:  toggleTooltipOn,
               },
....

function toggleTooltipOn(vnode){
  setupJQuery();  
  jQuery[0].$( vnode.elm )
    .tooltip({container:'body', trigger: 'hover');
//container:body is to help tooltips not wiggle on hover
//trigger:hover is to only trigger on hover, not on click
}

function tooltipOff( vnode ){
  setupJQuery();      
  jQuery[0].$( vnode.elm ).tooltip('hide');
}

Questo funziona per me:

$(document).ready(function() {
   $('#save').tooltip({
            trigger : 'hover'
        }) ;

});

Stavo disabilitando dinamicamente il pulsante di salvataggio, quindi il problema era.

All'interno della funzione Documento pronto usa this

 $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip({
               trigger : 'hover'
            });
    });

Questa soluzione ha funzionato per me.

$('a[data-toggle="tooltip"]').tooltip({
  animated: 'fade',
  placement: 'bottom',
  trigger: 'click'
});

$('a[data-toggle="tooltip"]').click(function(event){
  event.stopPropagation();
});

$('body').click(function(){
  $('a[data-toggle="tooltip"]').tooltip('hide');
});

violino

Ho provato la maggior parte delle soluzioni fornite nelle risposte precedenti, ma nessuna ha funzionato per me.

Il mio problema è in DataTable. Di seguito il codice funziona per me.

columnDefs: [ { targets: 0, data: "id", render: function (data, type, full, meta) { return '<a href="javascript:;" class="btn btn-xs btn-default" data-toggle="tooltip" title="Pending" data-container="body"><i class="fa fa-check"></i></a>'; } } ], drawCallback: function() { $('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="tooltip"]').on('click', function () { $(this).tooltip('hide'); }); }

Puoi anche utilizzare il metodo seguente per nascondere il suggerimento su mouseleave , come di seguito:

jQuery("body").on("mouseleave", ".has-tooltip", function(){
    jQuery(this).blur();
});

Nel mio caso questa era la soluzione:

beforeDestroyingElement() {    
  $('[data-toggle="tooltip"]').tooltip('hide');
}

Non stavo obbedendo a questa regola dai documenti di Bootstrap:

I tooltip devono essere nascosti prima che i loro elementi corrispondenti siano stati rimossi dal DOM.

Ciò è possibile anche nell'HTML aggiungendo quanto segue:

 data-trigger="hover"

 <button type="button" data-toggle="tooltip" data-placement="top" data-trigger="hover" title="To re-enable scanning, click here">Text</button>

Inoltre puoi usare questo modo per le vecchie versioni perché la risposta accettata non ha funzionato per me e ho scritto questo codice per me stesso e funziona bene.

$(document).on('mousedown', "[aria-describedby]", function() {
    $("[aria-describedby]").tooltip('hide');
});

Se qualcuno vuole impostare un suggerimento che verrà visualizzato per un po 'di tempo dopo il clic, ecco come ho fatto:

$('[data-toggle="tooltip"]').tooltip({
trigger : 'click'})  

$('[data-toggle="tooltip"]').on('shown.bs.tooltip', function () {
$(this).tooltip('hide')
})

L'uso di una sfocatura forzata () ha la possibilità di ridurre l'esperienza dell'utente. Non lo farei. Ho scoperto che la rimozione di "data-original-title" così come la rimozione degli attributi "data-toggle" e "title" ha funzionato per me.

    $(id).tooltip('hide');
    $(id).removeAttr("data-toggle");
    $(id).removeAttr("data-original-title");
    $(id).removeAttr("title");