Modifier le contenu de L'info-bulle Twitter Bootstrap sur le clic

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

196
demandé sur tjati 2012-02-29 19:30:40

22 réponses

Je viens de trouver ceci aujourd'hui en lisant le code source. Donc $.tooltip(string) appelle n'importe quelle fonction dans 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.

Donc nous faisons 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');
362
répondu Mehmet Duran 2017-01-17 17:06:17

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

73
répondu Adriaan 2015-09-11 19:32:23

Vous pouvez mettre à jour le texte de l'info-bulle sans appeler show / hide:

$(myEl)
    .attr('title', newTitle)
    .tooltip('fixTitle')
    .tooltip('setContent')
12
répondu BenG 2015-04-28 19:13:01

Voici une bonne solution si vous voulez changer 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 se repositionne pas, mais si vous faites un changement d'un mot, etc., ça devrait aller). et lorsque vous passez la souris sur + retour sur l'info-bulle, il est toujours mis à jour.

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

11
répondu ndreckshage 2013-12-20 23:35:12

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
répondu Relational 2012-09-02 11:29:49

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 tout de suite et ne pas attendre que l'info-bulle soit masquée et affichée à nouveau.

6
répondu empa 2015-11-06 07:15:41

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

$(element).attr('data-original-title', newValue);
5
répondu Morteza QorbanAlizade 2018-04-13 10:03:03

Ce qui suit a fonctionné le mieux pour moi, fondamentalement, je supprime toute info-bulle existante et ne prend pas la peine de montrer 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 plane pas au-dessus.

La raison pour laquelle je suis allé 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 montrant parfois pas en survolant le 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
    });
}
4
répondu aknuds1 2013-01-05 17:19:05

Pour Bootstrap 4:

$(element).attr("title", "Copied!").tooltip("_fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("_fixTitle");
4
répondu Bass 2018-05-03 08:29:41

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

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

2
répondu Lucky 2016-01-18 22:15:50

Dans bootstrap 4, j'utilise simplement $(el).tooltip('dispose'); puis je le recrée normalement. Vous pouvez donc placer le dispose 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 avec les valeurs semble moins amical.

2
répondu Martin Lyne 2018-04-16 22:42:04

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

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

Vous n'avez pas besoin d'utiliser uniquement le titre de l'élément appelé.

1
répondu studio 42 france 2013-11-27 15:01:21

Détruire toute info-bulle préexistante afin que nous puissions repeupler avec le nouveau contenu de l'info-bulle

$(element).tooltip("destroy");    
$(element).tooltip({
    title: message
});
1
répondu jerin 2015-02-18 13:42:22

Je pense que Mehmet Duran a presque raison, mais il y avait 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 vérifiant s'il existe une classe appelée "tooltip_class". Espérons que cette aide.

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

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

    }
0
répondu René Fernández 2013-04-25 11:41:18

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 top pour animer à la fois la "sauvegarde"."message (en utilisant &nbsp de sorte que l'info-bulle ne change pas de taille) et de changer le texte en" terminé."(plus 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
répondu Nate 2013-11-08 19:43:42

Je n'ai pu obtenir aucune des réponses, voici une solution de contournement:

$('#'+$(element).attr('aria-describedby')+' .tooltip-inner').html(newTitle);
0
répondu Alex 2015-08-03 23:46:22

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
répondu omabra 2017-08-29 09:25:46

Avec Boostrap objet info-bulle:

$(element).attr('data-original-title', 'New value');
$(element).data('bs.tooltip').tip().find('.tooltip-inner').text('New value');
0
répondu B.Asselin 2018-07-03 07:51:32

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>
0
répondu Chloe 2018-09-13 19:58:16

Vous pouvez utiliser ce code pour masquer l'info-bulle modifier son titre et afficher à nouveau l'info-bulle, lorsque la requête ajax retourne avec succès.

$(element).tooltip('hide');
$(element).attr('title','this is new title');
$(element).tooltip('fixTitle');
setTimeout(function() {  $(element).tooltip('show');}, 500);
-1
répondu Saifee 2014-10-03 17:30:52

J'utilise cette solution facile:

$(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
répondu George 2018-07-24 13:29:07
$(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 qu'elle a été initialisée avec attr 'data-original-title'.

-1
répondu Amine 2018-08-07 06:51:45