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


224

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?

Réponses:


411

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

5
Merci! Cela avait été dérouté pendant une heure.
rameau

160
Ou encore plus court (plus lisse)$(element).attr('title', 'NEW_TITLE').tooltip('fixTitle').tooltip('show');
lukmdo

5
Vous pouvez également modifier le titre via la propriété data ('tooltip'). Options, voir stackoverflow.com/questions/10181847/…
James McMahon

4
Impossible de trouver de la documentation sur «fixTitle», donc je suppose que ce n'est pas une bonne idée de l'utiliser!? ...
user2846569

16
En fait, cela n'a pas fonctionné pour moi, l'infobulle a changé de valeur puis a disparu rapidement. $(element).attr('data-original-title', newValue).tooltip('show');était la solution de travail la plus simple pour moi.
Gabe O'Leary

98

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

5
Réponse
claire

3
Il n'applique pas les modifications immédiatement, vous devez passer la souris et passer la souris pour voir le nouveau texte du titre
Lev Lukomsky

9
C'est en fait la meilleure réponse et vous pouvez l'ajouter .tooltip('show');pour qu'elle s'affiche après la mise à jour
Jared

Il s'agit de la seule solution (parmi tant d'autres essayées) qui semblait fonctionner (bs3). Belle solution à coup sûr!
jyoseph

3
Cette solution est meilleure que toutes les autres
Ayyaz Zafar

14

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

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

3
Cela, avec .tooltip('show')sur la fin de la chaîne, a fonctionné pour moi.
markau

1
oui, setContentet showfait l'affaire! vous pouvez changer data-original-titledirectement au lieu d'utiliserfixTitle
brauliobo

Testé sur Bootstrap v2.3.1
Ricardo

13

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


5
Dit $tipn'est pas un attribut de$(element)
Augustin Riedinger

A fait ça:$(element).attr('title', newTitle).tooltip('fixTitle').parent().find('.tooltip .tooltip-inner').text(newTitle);
Augustin Riedinger

Je mets à jour une info-bulle sur un élément voisin lors de la saisie dans un champ de texte, et l'info-bulle disparaît pour moi avec ce code lorsque j'appuie sur une touche.
tremby

Merci pour cela. Le seul problème avec cette solution est qu'elle semble gâcher la position de l'info-bulle après un changement de texte.
Wojciech Zylinski

13

pour Bootstrap 4:

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

3
Cela utilise une API non documentée. Il faut se méfier.
Chloé

9

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

7
Avec bootstrap 3, cela devient$('#tooltip_id').data('bs.tooltip').options.title = 'New_value!';
ajbeaven

Hé relationnel, pourriez-vous changer votre réponse pour refléter les corrections des commentaires? Merci.
thouliha

7

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.


7

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.


6

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

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

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

1
Meilleure réponse à cette question.
Daniel Miliński

@ DanielMiliński Merci :)
aknuds1

1
Si vous utilisez boostrap3, vous devez utiliser à la data('bs.tooltip')place dedata('tooltip')
Nigel Angel

3

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.


Devrions-nous appeler $ (el) .tooltip ('dispose') avant ou après la mise à jour du titre de l'info-bulle?
Fifi

@imabot supprime l'ancienne info-bulle, puis recrée avec de nouvelles données. Si vos info-bulles sont complexes, vous souhaiterez peut-être récupérer ou autrement stocker la configuration initiale afin que vous puissiez simplement recréer avec cette configuration + nouvelles valeurs. J'espère que cela a du sens.
Martin Lyne

2

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


2

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


1

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

1

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

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

0

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

    }

0

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

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.


0

Avec l'objet info-bulle Boostrap:

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

0

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>


0

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

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

-1

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

-1

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


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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.