Il tooltip di Jquery non sta scomparendo al clic dell'elemento

Question

Sto usando jquery-1.9.1.js e UI jquery-ui-1.10.3.custom.min.js. Quando passo il mouse su qualsiasi elemento del modulo mostra tooltip e scompare al passaggio del mouse. ma voglio svanire quel toolip sull'evento click di quell'elemento, perché nel mio scenario attuale mostra tooltip per il pulsante e persiste anche dopo il clic del pulsante. quindi vede più suggerimenti sulla pagina. Ho bisogno di nasconderli subito dopo aver cliccato. (Di seguito è riportata la schermata).

Ho usato il codice qui sotto, ma non funziona per me

$(document).click(function() { 
     $(this).tooltip("option", "hide", { effect: "explode", duration: 500 }); 
     }); 

Come risolvere questo pls aiuto.

EDIT

Sto usando pannello di aggiornamento. creerà un problema?

Answer 1

In base alla documentazione di jQueryUI, il codice cambia solo la modalità di chiusura. Quello che vuoi è closehttp://api.jqueryui.com/tooltip/#method-close.

Tuttavia potrebbe essere necessario modificare il codice un po 'per farlo funzionare. A giudicare dal tuo codice usi la delega (permettendo a qualcos'altro di rendere la descrizione del tuo articolo), invece di applicarla direttamente al tuo articolo. Secondo la chiusura della documentazione non funziona su tooltip delegati.

Si vorrà qualcosa di simile a

$('.editButtons').tooltip().click(function() { 
    $('.editButtons').tooltip("close"); 
}) 

Answer 2

mod brutto a chiusura tooltip delegato (ultimo aperto)

$('div[id^="ui-tooltip-"]:last').remove(); 

Answer 3

$(document).click(function() { 
    $(this).tooltip("option", "hide", { effect: "explode", duration: 500 }).off("focusin focusout"); 
}); 

Answer 4

Può essere un hack sporco, ma può non solo nascondi l'elemento tooltip selezionandolo usando "ui-tooltip" che è la classe applicata al contenitore tooltip.

$('body').on("click","element_selector",function(event){ 
$('.ui-tooltip').hide(); 
}); 

È necessario sostituire "elemento_selettore" con un selettore appropriato per i propri elementi.

Answer 5

So che è una vecchia domanda, ma mi sono imbattuto nello stesso problema e ho usato il seguente modo per risolverlo.

Diciamo che hai usato questo per avviare le descrizioni dei comandi:

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

Di seguito sfuma la descrizione comando dopo un clic. Dopo la dissolvenza lo rimuove dal DOM (altrimenti potresti finire con un sacco di suggerimenti nascosti).

$('[data-toggle="tooltip"]').click(function() { 
    $('.tooltip').fadeOut('fast', function() { 
     $('.tooltip').remove(); 
    }); 
}); 

Spero che questo aiuti qualcuno!

Answer 6

Ho adottato un approccio leggermente diverso durante l'utilizzo di jq 1.12 nascondendo tutti i tooltip ui quando si mostra quello nuovo.Questo è testato in Chrome e IE 11 e IE 11 (emulazione IE8 tramite http-equiv = contenuto "X-UA-Compatible" = "IE = 8")

$.widget("ui.tooltip", $.ui.tooltip, { 
    options: { 
     content: function() { 
      $(".ui-tooltip").fadeOut(); /* tooltip genocide */ 
      return $(this).prop('title'); 
     }, 
     show: { 
      effect: "fade", 
      delay: 750 
     } 
    } 
}); 

hth