web-dev-qa-db-fra.com

Modifier le contenu de l'info-bulle Twitter Bootstrap par clic

J'ai une info-bulle sur un élément d'ancrage, qui envoie une demande AJAX au 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 est renvoyée avec succès. Comment puis-je manipuler l'info-bulle après l'initiation?

jquerytwitter-bootstraptooltip
203
Ronny-André Bendiksen

Je viens de trouver cela aujourd'hui en lisant le code source. Donc, $.tooltip(string) appelle une fonction de la classe Tooltip. Et si vous regardez Tooltip.fixTitle, il récupère l'attribut data-original-title et remplace la valeur du titre par celui-ci. 

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'info-bulle. 

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

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

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

UPDATE: Vous pouvez ajouter .tooltip ('show') pour afficher les modifications immédiatement, vous n'avez pas besoin de mouseout et de la souris sur la souris pour voir le changement dans le titre.

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

vous pouvez mettre à jour le texte de l'info-bulle sans appeler réellement afficher/masquer:

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

voici une solution intéressante si vous souhaitez modifier le texte sans fermer ni réouvrir 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 fermeture d’info-bulle (ne se repositionne pas, mais si vous effectuez un changement d’un mot, etc., cela devrait aller). et lorsque vous passez la souris sur + info-bulle, elle est toujours mise à jour.

** ceci est bootstrap 3, pour 2 vous devez probablement changer les noms de données/classes

11
ndreckshage

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

Pour bootstrap 3.x

Cela semble être la solution la plus propre:

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

Show est utilisé pour mettre à jour le titre immédiatement et pas attendre que l'info-bulle soit masquée et affichée à nouveau.

6
empa

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

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

pour Bootstrap 4:

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

Ce qui suit a fonctionné au mieux pour moi. En gros, je supprime toute info-bulle existante sans me soucier de la montrer. Si vous appelez show sur l'info-bulle comme dans d'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, qui réutilisaient l'info-bulle existante, posaient des problèmes étranges. L'infobulle ne s'affichait parfois pas lorsque le pointeur survolait l'élément.

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

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
Chloe

Dans le bootstrap 4, je viens d'utiliser $(el).tooltip('dispose');, puis de le recréer normalement. Vous pouvez donc placer la commande Disposer devant une fonction qui crée une info-bulle pour vous assurer qu’elle ne double pas.

Devoir vérifier l'état et bricoler des valeurs semble moins amical.

2
Martin Lyne

Vous pouvez définir le contenu lors d'un 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é.

1
studio 42 france

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

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

Je pense que Mehmet Duran a presque raison, mais l’utilisation de plusieurs classes avec la même info-bulle et leur placement posaient quelques problèmes. 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');

    }
0
René Fernández

Avec l’objet Tooltip Boostrap:

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

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'info-bulle.

0
omabra

Pour BS4 (et BS3 avec des modifications mineures) .. après des heures de recherche et d’essais, j’ai trouvé la solution la plus fiable pour résoudre ce problème, qui résout même le problème de l’ouverture simultanée de plusieurs logiciels (info-bulle ou popover), et le problème de l'ouverture automatique après avoir perdu la mise au point, 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>

0
Sherif Salah

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

$('.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 disparaître l'ancien et le nouveau)

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

J'utilise la méthode du haut pour animer la "sauvegarde". message (en utilisant &nbsp pour que la taille de l'info-bulle ne change pas) 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.&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
Nate

Je ne pouvais obtenir aucune des réponses de travail, voici une solution de contournement:

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