J'ai une info-bulle sur un élément d'ancrage, qui envoie une demande AJAX en un clic. Cet élément a une info-bulle (de Twitter Bootstrap). Je souhaite que le contenu de l'info-bulle change lorsque la demande AJAX revient avec succès. Comment puis-je manipuler l'info-bulle après l'initiation?

Je viens de le trouver aujourd'hui en lisant le code source. Appelle donc $.tooltip(string)n'importe quelle fonction de la Tooltipclasse. Et si vous regardez Tooltip.fixTitle, il récupère l' data-original-titleattribut et remplace la valeur du titre par lui.

Nous faisons donc simplement:

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

et bien sûr, il met à jour le titre, qui est la valeur à l'intérieur de l'infobulle.

Une autre façon (voir le commentaire @lukmdo ci-dessous):

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

Dans Bootstrap 3, il suffit d'appeler elt.attr('data-original-title', "Foo")car les changements dans l' "data-original-title"attribut déclenchent déjà des changements dans l'affichage des info-bulles.

MISE À JOUR: Vous pouvez ajouter .tooltip ('show') pour afficher les modifications immédiatement, vous n'avez pas besoin de passer la souris et de survoler la cible pour voir la modification dans le titre

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

vous pouvez mettre à jour le texte de l'infobulle sans appeler / afficher:

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

Voici une bonne solution si vous souhaitez modifier le texte sans fermer et rouvrir l'info-bulle.

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

de cette façon, le texte est remplacé sans fermer l'info-bulle (ne repositionne pas, mais si vous faites un changement d'un mot, etc. ça devrait aller). et lorsque vous passez la souris sur + info-bulle, elle est toujours mise à jour.

** c'est bootstrap 3, pour 2 vous devrez probablement changer les données / noms de classe

pour Bootstrap 4:

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

Cela fonctionne si l'info-bulle a été instanciée (éventuellement avec javascript):

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

Pour bootstrap 3.x

Cela semble être la solution la plus propre:

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

Afficher est utilisé pour effectuer immédiatement la mise à jour du titre et ne pas attendre que l'infobulle soit masquée et affichée à nouveau.

Voici la mise à jour du Bootstrap 4 :

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

Mais la meilleure façon est de faire comme ça:

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

ou en ligne:

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

Du côté UX, vous voyez simplement que le texte est modifié sans effet de fondu ou de masquage / affichage et qu'il n'y a pas besoin de _fixTitle.

Vous pouvez simplement changer le en data-original-titleutilisant le code suivant:

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

Ce qui suit a fonctionné le mieux pour moi, fondamentalement, je supprime toute info-bulle existante et ne me donne pas la peine d'afficher la nouvelle info-bulle. Si vous appelez show sur l'info-bulle comme dans les autres réponses, il apparaît même si le curseur ne survole pas au-dessus.

La raison pour laquelle j'ai opté pour cette solution est que les autres solutions, en réutilisant l'info-bulle existante, ont conduit à des problèmes étranges avec l'info-bulle ne s'affichant parfois pas lors du survol du curseur au-dessus de l'élément.

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

Dans bootstrap 4, j'utilise simplement $(el).tooltip('dispose');puis recrée comme d'habitude. Vous pouvez donc placer le disposer avant une fonction qui crée une info-bulle pour être sûr qu'elle ne double pas.

Devoir vérifier l'état et bricoler les valeurs semble moins convivial.

Vous pouvez définir du contenu sur l'appel d'info-bulle avec une fonction

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

Vous n'êtes pas obligé d'utiliser uniquement le titre de l'élément appelé.

Merci ce code m'a été très utile, je l'ai trouvé efficace sur mes projets

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

Détruisez toute info-bulle préexistante afin que nous puissions repeupler avec un nouveau contenu d'infobulle

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

Je n'ai pu obtenir aucune réponse, voici une solution:

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

Je pense que Mehmet Duran a presque raison, mais il y a eu quelques problèmes lors de l'utilisation de plusieurs classes avec la même info-bulle et leur placement. Le code suivant évite également les erreurs js en vérifiant s'il existe une classe appelée "tooltip_class". J'espère que cela t'aides.

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

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

    }

Modifiez le texte en modifiant directement le texte de l'élément. (ne met pas à jour la position de l'infobulle).

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

Modifiez le texte en détruisant l'ancienne info-bulle, puis en créant et en affichant une nouvelle. (Fait fondre l'ancien et le nouveau s'estompe)

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

J'utilise la méthode supérieure pour animer à la fois la «sauvegarde». message (en utilisant &nbsppour que l'info-bulle ne change pas de taille) et pour changer le texte en "Terminé". (plus le remplissage) lorsque la demande est terminée.

$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 */);
});

Cela a fonctionné pour moi: (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'attribut data-html="true"permet d'utiliser html sur le titre de l'infobulle.

Avec l'objet info-bulle Boostrap:

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

Pour BS4 (et BS3 avec des changements mineurs) .. après des heures de recherches et d'essais, j'ai trouvé la solution la plus fiable pour ce problème et cela résout même le problème d'en ouvrir plusieurs (info-bulle ou popover) en même temps, et le problème de l'ouverture automatique après avoir perdu le focus, etc.

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

Je n'ai testé cela que dans bootstrap 4 et sans appeler .show ()

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

vous pouvez utiliser ce code pour masquer l'info-bulle, modifier son titre et afficher à nouveau l'info-bulle, lorsque la demande ajax revient avec succès.

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

J'utilise cette solution simple:

$(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 si vous devez modifier le texte d'une info-bulle après son initialisation avec attr 'data-original-title'.