Ich habe einen Tooltip für ein Ankerelement, der beim Klicken eine AJAX-Anfrage sendet. Dieses Element verfügt über einen Tooltip (von Twitter Bootstrap). Ich möchte, dass sich der Tooltip-Inhalt ändert, wenn die AJAX-Anforderung erfolgreich zurückgegeben wird. Wie kann ich den Tooltip nach der Initiierung bearbeiten?

Ich habe das heute beim Lesen des Quellcodes gefunden. So $.tooltip(string)ruft jede Funktion innerhalb der TooltipKlasse. Und wenn Sie sich das ansehen Tooltip.fixTitle, holt es dasdata-original-title Attribut und der Titelwert durch dieses ersetzt.

Also machen wir einfach:

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

und sicher aktualisiert es den Titel, der der Wert in der QuickInfo ist.

Ein anderer Weg (siehe @ lukmdo Kommentar unten):

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

In Bootstrap 3 ist es ausreichend aufzurufen, elt.attr('data-original-title', "Foo")da Änderungen am "data-original-title"Attribut bereits Änderungen in der Tooltip-Anzeige auslösen.

UPDATE: Sie können .tooltip ('show') hinzufügen, um die Änderungen sofort anzuzeigen. Sie müssen kein Mouseout und Mouseover-Ziel verwenden, um die Änderung im Titel zu sehen

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

Sie können den Tooltip-Text aktualisieren, ohne tatsächlich show / hide aufzurufen:

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

Hier ist eine gute Lösung, wenn Sie den Text ändern möchten, ohne den Tooltip zu schließen und erneut zu öffnen.

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

Auf diese Weise wird Text ersetzt, ohne den Tooltip zu schließen (wird nicht neu positioniert, aber wenn Sie eine Änderung von einem Wort usw. vornehmen, sollte dies in Ordnung sein). und wenn Sie mit dem Mauszeiger über + zurück in der QuickInfo fahren, wird diese weiterhin aktualisiert.

** Dies ist Bootstrap 3, für 2 müssen Sie wahrscheinlich Daten- / Klassennamen ändern

für Bootstrap 4:

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

Dies funktioniert, wenn der Tooltip instanziiert wurde (möglicherweise mit Javascript):

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

Für Bootstrap 3.x.

Dies scheint die sauberste Lösung zu sein:

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

Mit Show wird der Titel sofort aktualisiert und nicht darauf gewartet, dass der Tooltip ausgeblendet und erneut angezeigt wird.

Hier ist das Update für Bootstrap 4 :

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

Aber der beste Weg ist, dies so zu machen:

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

oder inline:

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

Auf der UX-Seite sehen Sie nur, dass der Text ohne Überblendung oder Ausblenden / Einblenden von Effekten geändert wird und keine Notwendigkeit für die _fixTitle.

Sie können das einfach data-original-titlemit folgendem Code ändern :

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

Das Folgende hat für mich am besten funktioniert. Im Grunde verschrotte ich jeden vorhandenen Tooltip und mache mir nicht die Mühe, den neuen Tooltip anzuzeigen. Wenn Sie show in der QuickInfo wie in anderen Antworten aufrufen, wird es angezeigt, auch wenn der Cursor nicht darüber schwebt.

Der Grund, warum ich mich für diese Lösung entschieden habe, ist, dass die anderen Lösungen, die den vorhandenen Tooltip wiederverwendeten, zu einigen seltsamen Problemen führten, bei denen der Tooltip manchmal nicht angezeigt wurde, wenn Sie den Cursor über das Element bewegen.

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

In Bootstrap 4 verwende ich einfach $(el).tooltip('dispose');und erstelle es wie gewohnt neu. Sie können die Disposition also vor eine Funktion stellen, die einen Tooltip erstellt, um sicherzustellen, dass sie sich nicht verdoppelt.

Den Status überprüfen und mit Werten basteln zu müssen, scheint weniger freundlich zu sein.

Sie können den Inhalt eines Tooltip-Aufrufs mit einer Funktion festlegen

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

Sie müssen nicht nur den Titel des aufgerufenen Elements verwenden.

Dank dieses Codes war sehr hilfreich für mich, ich fand es effektiv bei meinen Projekten

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

Zerstören Sie bereits vorhandene Tooltips, damit wir sie mit neuen Tooltip-Inhalten neu füllen können

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

Ich konnte keine der Antworten zum Laufen bringen. Hier ist eine Problemumgehung:

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

Ich denke, Mehmet Duran hat fast recht, aber es gab einige Probleme bei der Verwendung mehrerer Klassen mit demselben Tooltip und deren Platzierung. Der folgende Code vermeidet auch js-Fehler, die prüfen, ob es eine Klasse namens "tooltip_class" gibt. Hoffe das hilft.

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

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

    }

Ändern Sie den Text, indem Sie den Text im Element direkt ändern. (aktualisiert die Tooltip-Position nicht).

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

Ändern Sie den Text, indem Sie den alten Tooltip zerstören und dann einen neuen erstellen und anzeigen. (Bewirkt, dass der alte ausgeblendet und der neue ausgeblendet wird)

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

Ich verwende die Top-Methode, um das "Speichern" zu animieren. Nachricht (mit&nbsp damit ändert sich der Tooltip nicht in der Größe) und um den Text in "Fertig" zu ändern. (plus Auffüllen), wenn die Anforderung abgeschlossen ist.

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

Das hat bei mir funktioniert: (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>

Mit dem Attribut kann data-html="true"HTML für den Tooltip-Titel verwendet werden.

Mit Tooltip-Objekt Boostrap:

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

Für BS4 (und BS3 mit geringfügigen Änderungen). Nach stundenlangem Suchen und Testen habe ich die zuverlässigste Lösung für dieses Problem gefunden und es löst sogar das Problem, mehrere (Tooltip oder Popover) gleichzeitig zu öffnen. und das Problem des automatischen Öffnens nach Fokusverlust usw.

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

Ich habe dies nur in Bootstrap 4 getestet , ohne .show () aufzurufen.

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

Mit diesem Code können Sie den Tooltip ausblenden, seinen Titel ändern und den Tooltip erneut anzeigen, wenn die Ajax-Anforderung erfolgreich zurückgegeben wird.

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

Ich benutze diesen einfachen Ausweg:

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

Nützlich, wenn Sie den Text eines Tooltips ändern müssen, nachdem er mit attr 'data-original-title' initialisiert wurde.