Cambia il contenuto di Twitter Bootstrap Tooltip al clic


224

Ho una descrizione comando su un elemento di ancoraggio, che invia una richiesta AJAX al clic. Questo elemento ha una descrizione comandi (da Twitter Bootstrap). Voglio che il contenuto della descrizione comandi cambi quando la richiesta AJAX ritorna correttamente. Come posso manipolare la descrizione comandi dopo l'iniziazione?

Risposte:


411

L'ho appena trovato oggi mentre leggevo il codice sorgente. Quindi $.tooltip(string)chiama qualsiasi funzione all'interno della Tooltipclasse. E se guardi Tooltip.fixTitle, recupera l' data-original-titleattributo e sostituisce il valore del titolo con esso.

Quindi facciamo semplicemente:

$(element).tooltip('hide')
          .attr('data-original-title', newValue)
          .tooltip('fixTitle')
          .tooltip('show');

e abbastanza sicuro, aggiorna il titolo, che è il valore all'interno della descrizione comando.

Un altro modo (vedi il commento @lukmdo di seguito):

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

5
Grazie! Questo era stato sconcertato per un'ora.
ramoscello

160
O ancora più breve (più liscio)$(element).attr('title', 'NEW_TITLE').tooltip('fixTitle').tooltip('show');
lukmdo,

5
Puoi anche modificare il titolo tramite la proprietà data ('descrizione comando'). Options, vedi stackoverflow.com/questions/10181847/…
James McMahon,

4
Impossibile trovare la documentazione su "fixTitle", quindi credo che non sia una buona idea usare questo !? ...
user2846569,

16
Questo in realtà non ha funzionato per me, il tooltip ha cambiato i valori e poi è scomparso rapidamente. $(element).attr('data-original-title', newValue).tooltip('show');è stata la soluzione di lavoro più semplice per me.
Gabe O'Leary,

98

In Bootstrap 3 è sufficiente chiamare elt.attr('data-original-title', "Foo")poiché le modifiche "data-original-title"all'attributo attivano già le modifiche nella visualizzazione della descrizione comandi.

AGGIORNAMENTO: È possibile aggiungere .tooltip ('show') per mostrare immediatamente le modifiche, non è necessario passare al mouse e spostare il mouse per vedere la modifica nel titolo

elt.attr('data-original-title', "Foo").tooltip('show');

5
Risposta pulita, perché no up: <
ays0110

3
Non applica immediatamente le modifiche, per visualizzare il testo del nuovo titolo è necessario eseguire il passaggio del mouse e il passaggio del mouse
Lev Lukomsky,

9
Questa è in realtà la risposta migliore e puoi aggiungerla .tooltip('show');per mostrarla dopo l'aggiornamento
Jared,

Questa è l'unica soluzione (su molti tentati) che sembrava funzionare (bs3). Bella soluzione di sicuro!
joseph

3
Questa soluzione è migliore di tutte le altre
Ayyaz Zafar

14

puoi aggiornare il testo del tooltip senza chiamare show / hide:

$(myEl)
    .attr('title', newTitle)
    .tooltip('fixTitle')
    .tooltip('setContent')

3
Questo, con .tooltip('show')la fine della catena, ha funzionato per me.
markau,

1
sì, setContente showfa il trucco! puoi cambiare data-original-titledirettamente invece di usarefixTitle
brauliobo

Testato su Bootstrap v2.3.1
Ricardo

13

ecco una buona soluzione se si desidera modificare il testo senza chiudere e riaprire la descrizione comandi.

$(element).attr('title', newTitle)
          .tooltip('fixTitle')
          .data('bs.tooltip')
          .$tip.find('.tooltip-inner')
          .text(newTitle)

in questo modo, il testo è stato sostituito senza chiudere la descrizione comandi (non riposizionare, ma se si sta modificando una parola ecc., dovrebbe andare bene). e quando si passa con il mouse su + indietro sulla descrizione comandi, viene comunque aggiornato.

** questo è bootstrap 3, per 2 probabilmente dovrai cambiare i nomi di dati / classe


5
Says $tipnon è un attributo di$(element)
Augustin Riedinger

Fatto questo:$(element).attr('title', newTitle).tooltip('fixTitle').parent().find('.tooltip .tooltip-inner').text(newTitle);
Augustin Riedinger,

Sto aggiornando una descrizione comandi su un elemento vicino quando si digita in un campo di testo e la descrizione comandi scompare per me con questo codice quando premo un tasto.
tremby,

Grazie per questo. L'unico problema con questa soluzione è che sembra incasinare la posizione della descrizione comandi dopo la modifica del testo.
Wojciech Zylinski,

13

per Bootstrap 4:

$(element).attr("title", "Copied!").tooltip("_fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("_fixTitle");

3
Questo utilizza API non documentate. Attenzione.
Chloe,

9

Funziona se la descrizione comandi è stata istanziata (possibilmente con javascript):

$("#tooltip_id").data('tooltip').options.title="New_value!";
$("#tooltip_id").tooltip('hide').tooltip('show');

7
Con bootstrap 3 diventa$('#tooltip_id').data('bs.tooltip').options.title = 'New_value!';
ajbeaven l'

Ehi relazionale, potresti cambiare la tua risposta per riflettere le correzioni dei commenti? Grazie.
thouliha,

7

Per bootstrap 3.x

Questa sembra la soluzione più pulita:

$(element)
  .attr('data-original-title', 'New title').tooltip('show')

Show viene utilizzato per eseguire subito l'aggiornamento del titolo e non attendere che la descrizione comandi venga nascosta e mostrata di nuovo.


7

Ecco l'aggiornamento per Bootstrap 4 :

var title = "Foo";
elt.attr('data-original-title', title);
elt.tooltip('update');
elt.tooltip('show');

Ma il modo migliore è fare così:

var title = "Foo";
elt.attr('title', title);
elt.attr('data-original-title', title);
elt.tooltip('update');
elt.tooltip('show');

o in linea:

var title = "Foo";
elt.attr('title', title).attr('data-original-title', title).tooltip('update').tooltip('show');

Dal lato UX vedi solo che il testo viene modificato senza effetti di dissolvenza o nascondi / mostra e non è necessario per _fixTitle.


6

Puoi semplicemente cambiare data-original-titleusando il seguente codice:

$(element).attr('data-original-title', newValue);

6

Bootstrap 4

$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show')

https://getbootstrap.com/docs/4.1/components/tooltips/#tooltipdispose

$('#topic_1').tooltip({title: 'Hello'}).tooltip('show');
setTimeout( function() {
  $('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show');
}, 5000);
#topic_1 {
  border: 1px solid red;
  margin: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

<div id="topic_1">Topic 1</div>


4

Quanto segue ha funzionato al meglio per me, fondamentalmente sto eliminando qualsiasi tooltip esistente e non mi preoccupo di mostrare il nuovo tooltip. Se la chiamata viene visualizzata sulla descrizione comando come in altre risposte, si apre anche se il cursore non si trova sopra di esso.

Il motivo per cui ho optato per questa soluzione è che le altre soluzioni, riutilizzando la descrizione comandi esistente, hanno portato ad alcuni strani problemi con la descrizione comandi che a volte non vengono visualizzati quando si sposta il cursore sopra l'elemento.

function updateTooltip(element, tooltip) {
    if (element.data('tooltip') != null) {
        element.tooltip('hide');
        element.removeData('tooltip');
    }
    element.tooltip({
        title: tooltip
    });
}

1
Migliore risposta a questa domanda.
Daniel Miliński,

@ DanielMiliński Grazie :)
aknuds1

1
Se stai usando boostrap3 devi usare data('bs.tooltip')invece didata('tooltip')
Nigel Angel il

3

In bootstrap 4 uso solo $(el).tooltip('dispose');quindi ricreare normalmente. Quindi puoi mettere lo smaltimento prima di una funzione che crea una descrizione comandi per essere sicuro che non raddoppi.

Dover controllare lo stato e armeggiare con i valori sembra meno amichevole.


Dovremmo chiamare $ (el) .tooltip ('dispose') prima o dopo l'aggiornamento del titolo del tooltip?
Fifi,

@imabot elimina il vecchio tooltip, quindi ricrealo con nuovi dati. Se le tue descrizioni sono complesse, potresti voler recuperare o memorizzare in altro modo la configurazione iniziale in modo da poter semplicemente ricreare con quella configurazione + nuovi valori. Spero che abbia un senso.
Martin Lyne,

2

È possibile impostare il contenuto sulla chiamata della descrizione comando con una funzione

        $("#myelement").tooltip({
            "title": function() {
                return "<h2>"+$("#tooltipcontainer").html()+"</h2>";
            }
        });

Non è necessario utilizzare solo il titolo dell'elemento chiamato.


2

Grazie, questo codice mi è stato molto utile, l'ho trovato efficace nei miei progetti

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


1

Distruggi qualsiasi tooltip preesistente in modo da poter ripopolare con nuovi contenuti tooltip

$(element).tooltip("destroy");    
$(element).tooltip({
    title: message
});

1

Non sono riuscito a far funzionare nessuna delle risposte, ecco una soluzione alternativa:

$('#'+$(element).attr('aria-describedby')+' .tooltip-inner').html(newTitle);

0

Penso che Mehmet Duran abbia quasi ragione, ma ci sono stati dei problemi quando si usano più classi con la stessa descrizione e il loro posizionamento. Il codice seguente evita anche gli errori js controllando se esiste una classe chiamata "tooltip_class". Spero che questo ti aiuti.

if (jQuery(".tooltip_class")[0]){    

        jQuery('.tooltip_class')
            .attr('title', 'New Title.')
            .attr('data-placement', 'right')
            .tooltip('fixTitle')
            .tooltip('hide');

    }

0

Cambia il testo modificando direttamente il testo nell'elemento. (non aggiorna la posizione della descrizione comando).

$('.tooltip-inner', $element.next()).html(newHtml);
$('.tooltip-inner', $element.next()).text(newText);

Modifica il testo distruggendo la vecchia descrizione comandi, quindi creandone e mostrandone una nuova. (Fa sì che il vecchio svanisca e il nuovo svanisca)

$element
.tooltip('destroy')
.tooltip({
    // Repeat previous options.
    title: newText,
})
.tooltip('show');

Sto usando il metodo migliore per animare entrambi il "Salvataggio". messaggio (usando &nbspcosì il suggerimento non cambia in dimensioni) e per cambiare il testo in "Fatto". (più imbottitura) al completamento della richiesta.

$element.tooltip({
  placement: 'left',
  title: 'Saving...',
  trigger: 'manual',
}).tooltip('show');

var parent = $element.parent();
var interval_id = setInterval(function(){
    var text = $('.tooltip-inner', parent).html();
    switch(text) {
    case 'Saving.&nbsp;&nbsp;': text = 'Saving..&nbsp;'; break;
    case 'Saving..&nbsp;': text = 'Saving...'; break;
    case 'Saving...': text = 'Saving.&nbsp;&nbsp;'; break;
    }
    $('.tooltip-inner', parent).html(text);
}, 250);

send_request( function(){
    // When the request is complete
    clearInterval(interval_id);
    $('.tooltip-inner', parent).html('Done.&nbsp;&nbsp;&nbsp;&nbsp;');
    setTimeout(function() {
        $element.tooltip('hide');
    }, 1500 /* Show "Done." for a bit */);
});

0

Questo ha funzionato per me: (bootstrap 3.3.6; jquery = 1.11.3)

<a id="alertTooltip" href="#" data-html="true" class="tooltip" data-toggle="tooltip" title="Tooltip message"></a>

<script>
  $('#alertTooltip').attr('title', "Tooltip new <br /> message").tooltip('fixTitle');
</script>

L'attributo data-html="true"consente di utilizzare HTML nel titolo della descrizione comandi.


0

Con l'oggetto Tooltip Boostrap:

$(element).attr('data-original-title', 'New value');
$(element).data('bs.tooltip').tip().find('.tooltip-inner').text('New value');

0

Per BS4 (e BS3 con lievi modifiche) .. dopo ore di ricerche e prove, ho trovato la soluzione più affidabile per questo problema e risolve anche il problema dell'apertura di più di uno (tooltip o popover) allo stesso tempo, e il problema dell'apertura automatica dopo aver perso la messa a fuoco, ecc.

$('[data-toggle="tooltip"]').tooltip({
  trigger: 'hover'
}).on('shown.bs.tooltip', function() {
  var link = $(this);
  var data = '';
  data += '<ul style="list-style-type:none;margin:0;padding:0;text-align:left;font-size:12px">';
  data += '	<li>Sherif Salah</li>';
  data += '	<li>Muhammad Salah</li>';
  data += '	<li>and a gazillion more...</li>';
  data += '</ul>';
  link.attr('data-original-title', data);
  setTimeout(function() {
    if (link.is(':hover')) {
      link.tooltip("dispose").tooltip("show");
    }
  }, 1000);
});
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="card">
    <div class="card-body text-center">
      <a href="JavaScript:void(0);" class="btn btn-sm btn-link" data-toggle="tooltip" data-placement="top" data-html="true" title="Loading...">gazillion</a>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>

</html>


0

L'ho provato solo in bootstrap 4 e senza chiamare .show ()

el.tooltip('hide').attr('data-original-title', 'message');

-1

puoi usare questo codice per nascondere il suggerimento, cambiarne il titolo e mostrare di nuovo il suggerimento, quando la richiesta ajax ritorna correttamente.

$(element).tooltip('hide');
$(element).attr('title','this is new title');
$(element).tooltip('fixTitle');
setTimeout(function() {  $(element).tooltip('show');}, 500);

-1

Sto usando questa semplice via d'uscita:

$(document).ready(function() {
    $("#btn").prop('title', 'Click to copy your shorturl');
});

function myFunction(){
  $(btn).tooltip('hide');
  $(btn).attr('data-original-title', 'Test');
  $(btn).tooltip('show');
});


-1
$(this).attr('data-original-title', 'click here to publish')
       .tooltip('fixTitle')
       .tooltip('show');

Utile se è necessario modificare il testo di una descrizione comandi dopo che è stato inizializzato con attr 'data-original-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.