2012-06-26 15 views
13

Utilizzo i suggerimenti del pacchetto Bootstrap di Twitter per mostrare le informazioni sugli articoli nella pagina. A volte le informazioni sono cambiate e devono essere aggiornate nel suggerimento. Ho provato semplicemente per reinizializzare tooltip con il nuovo titolo:Come sovrascrivere il tooltip di twitter bootstrap?

$('#selector').tooltip({ title: 'new text'}); 

Tuttavia titolo del tooltip non viene cambiato con il nuovo testo. Rimane uguale a come era stato impostato inizialmente. Qualche idea del perché, e c'è qualche problema? Grazie!

+0

prova questo: $ (elm) .tooltip ('destroy'). Tooltip(). Tooltip ('show'); – Aliti

risposta

14

Aggiornamento: Come sottolineato da @ Nigel-Angel, TWBS v3 utilizza data('bs.tooltip')


Non è possibile sostituire l'oggetto tooltip una volta che avete inizializzato su un elemento. Ma puoi cancellarlo e farlo di nuovo.

Provare a eliminare e quindi reinizializzare il suggerimento con tutte le opzioni (se ne avete).

$('#selector').data('tooltip',false)   // Delete the tooltip 
       .tooltip({ title: 'new text'}); 

Potrebbe essere necessario rimuovere gli ascoltatori, ma funziona così.

+0

Grande, esattamente quello di cui avevo bisogno. Molte grazie! – bbbonthemoon

+2

@bbbonthemoon Appena imbattuto in questo post: http://stackoverflow.com/a/9875490/1478467 che potrebbe essere più pulito – Sherbrow

+0

Questo ha funzionato alla grande, non è necessario modificare gli ascoltatori. –

2

Per qualche motivo, questo non ha funzionato per me (bootstrap 2.1.1). Quello che dovevo fare era:

$('#element').tooltip('destroy'); 
    $("#element").tooltip({'placement':'right', 'title':'larger larger text title'}); 
    $("#element").tooltip('show'); 
+0

Questo è quello che ha funzionato per me. Stavo usando due tooltip completamente diversi basati sul contesto dell'interfaccia utente. Grazie @aszahran. – Hallmanac

6

Questa tecnica non ha funzionato per me, così ho trovato una risposta, nascosto in uno dei commenti of a similar question.

il modo più pulito per aggiornare il testo di visualizzazione del tooltip

$(element).attr('title', 'NEW_TITLE').tooltip('fixTitle').tooltip('show');

Grazie a lukmdo

0

@Sherbrow È possibile utilizzare la più semplice non one.Need andare questa soluzione complicata. Ecco il codice di esempio.

$('#spanUsername').prop('title', newValue);  
0

Uso bootstrap 3 e nessuno di questi ha funzionato senza problemi. Distruggere il suggerimento tramite .tooltip('destroy') e ricrearlo nella stessa funzione .tooltip({...}) comporterebbe che il tooltip non funzioni più. Funzionava solo se la chiamata di ricreazione era stata fatta più tardi, dopo che la chiamata di distruzione aveva completato il suo lavoro in modo asincrono (quindi perché la ricreazione immediata era stata sbalordita).

I suggerimenti per distruggere i dati interni .data('tooltip',false) non hanno funzionato. In primo luogo, con bootstrap 3, sarebbe data('bs.tooltip, false) e quando è stato chiamato, se il tooltip è stato visualizzato al momento, lo perderebbe e lo lascerebbe visualizzato in modo permanente. Il nuovo tooltip mostrerebbe e nasconderà sopra di esso.

La mia soluzione finale è stata:

$x.tooltip('hide'); 
$x.data('bs.tooltip', false); 
$x.tooltip({ ... }) // recreate it 

Si noti che anche cambiando il titolo tramite le soluzioni simili .attr('title', '...') ed e chiamando .tooltip('fixupTitle') lavorato - ma scartato l'opzione placement e probabilmente anche le altre opzioni, e ha fatto un tooltip che è stato collocato in cima l'elemento anziché a destra, come era in origine.Potrebbe anche aver avuto alcuni degli altri bug sopra elencati, visti in altre varianti di questa soluzione, ma non ho guardato molto oltre.

Problemi correlati