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


115

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.


Anche nella mia domanda non funziona in collegamento, diamo un'occhiata lì. C'è lo stesso problema.
SilentCry

Risposte:


241

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/


1
Grazie David, funziona davvero. Ho frainteso l'opzione trigger per il tooltip in ultimo, ora ho ragione.
SilentCry

1
@SilentCry Ricorda solo a chi ti rivolgi, l'attivazione di un "passaggio del mouse" potrebbe non essere sempre facile / comune.
phk

3
@davidkonrad Piattaforme mobili, utenti non vedenti. Potrebbe anche spiegare perché hanno impostato "hover focus" come impostazione predefinita.
phk

2
@phk, bootstrap ha un problema generale non essendo mobile-first, per quanto riguarda i ciechi dovremmo usare aria-attributes. C'è BTW un ottimo strumento per testare l'usabilità sviluppato per le autorità canadesi con diversi "livelli" che puoi soddisfare -> achecker.ca/checker/index.php il mio paese non ha questi standard, ma vale la pena mantenerli Comunque.
davidkonrad

1
Potresti voler dare un'occhiata alla risposta di Karmonik Cola di seguito. Continua a mostrare la descrizione comando in primo piano.
David Stosik

63

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.


1
Questa deve essere la risposta accettata e dovrebbe anche essere implementata nel codebase di bootstrap.
kjdion84

5
Questo è stato estremamente utile per i tooltip di bootstrap posizionati su pulsanti con un trigger di "hover" che causano postback asincroni (ad esempio, pannelli modali di visualizzazione). Senza questo, il postback dalla pressione del pulsante fa sì che la descrizione comandi rimanga "bloccata" e non scompaia mai.
Bradykey

1
Nel mio caso, stavo disabilitando il pulsante di invio mentre veniva eseguita un'azione ajax. Mentre il processo ajax era in esecuzione, la descrizione comando sarebbe rimasta poiché il pulsante era disabilitato. Una volta completato il processo ajax, il pulsante diventerebbe nuovamente "disponibile". Passare il mouse sopra e poi disattivare il pulsante ignorerebbe il suggerimento. La soluzione di Nitai ha risolto tutto. La descrizione comando ora si nasconde al clic e funziona ancora al passaggio del mouse una volta che il pulsante diventa di nuovo attivo.
HPWD

Sono d'accordo con @ kjdion84. Ho lottato finché non ho trovato questo
Ahmad

9

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


Avevo il problema solo con i pulsanti della griglia di Telerik Kendo. Quando ne facevo clic, la descrizione comando non si nascondeva. Questo l'ha risolto!
John81

8

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


Funziona anche per me e ha il vantaggio rispetto alla soluzione accettata di mantenere la visualizzazione del suggerimento in primo piano.
David Stosik

3

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

2

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.


2

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

2

Inoltre puoi aggiungere:

onclick="this.blur()"

1
come questo è diverso da quello che ha proposto Kamornik Cola (tranne che per l'implementazione senza jQuery)? Suggerisco di aggiungere qualche spiegazione affinché la risposta sia utile. Cordiali saluti
YakovL

2

Soluzione funzionante

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

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

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

Sebbene questo codice possa rispondere alla domanda, fornire un contesto aggiuntivo sul perché e / o come questo codice risponde alla domanda ne migliora il valore a lungo termine.
Adam,

@Adam Non sono riuscito a trovare alcuna soluzione funzionante nei forum per nascondere un suggerimento dopo aver fatto clic su qualsiasi <a>, <button> o altri elementi a cui sono associati funzionalità o aspetto dei pulsanti.
Alpha

1

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

1
puoi riavere la descrizione comando al passaggio del mouse?
Vishnu

0

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

0

Questo funziona per me:

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

});

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


Qui il salvataggio è l'ID del mio pulsante
Devendra Singraul

0

All'interno della funzione Documento pronto usa this

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

0

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.


0

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


0

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

0

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.


0

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>

Purtroppo questo non funziona e il tooltip è ancora bloccato.
Fwd079

0

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

0

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

0

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");
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.