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?

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

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

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

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

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

per Bootstrap 4:

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

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

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

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.

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.

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

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

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>

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

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.

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

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

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

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

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

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

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

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

    }

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.  ': text = 'Saving.. '; break;
    case 'Saving.. ': text = 'Saving...'; break;
    case 'Saving...': text = 'Saving.  '; break;
    }
    $('.tooltip-inner', parent).html(text);
}, 250);

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

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.

Con l'oggetto Tooltip Boostrap:

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

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>

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

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

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

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

$(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'.