Ändern Sie den Inhalt des Twitter Bootstrap Tooltips beim Klicken

224

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?

Rebellion
quelle

Antworten:

412

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');
Mehmet Duran
quelle
5
Vielen Dank! Dies war eine Stunde lang verblüfft gewesen.
Zweig
160
Oder noch kürzer (glatter)$(element).attr('title', 'NEW_TITLE').tooltip('fixTitle').tooltip('show');
lukmdo
5
Sie können den Titel auch über die Eigenschaft data ('tooltip'). Options ändern
James McMahon
4
Es wurde keine Dokumentation zu 'fixTitle' gefunden, daher ist dies keine gute Idee!? ...
user2846569
16
Das hat bei mir eigentlich nicht funktioniert, der Tooltip hat die Werte gewechselt und ist dann schnell verschwunden. $(element).attr('data-original-title', newValue).tooltip('show');war die einfachste Arbeitslösung für mich.
Gabe O'Leary
98

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');
Adriaan Tijsseling
quelle
5
Saubere Antwort, warum keine Ups: <
ays0110
3
Änderungen werden nicht sofort angewendet. Sie müssen das Mouseout und das Mouseover-Ziel verwenden, um den neuen Titeltext anzuzeigen
Lev Lukomsky,
9
Dies ist eigentlich die beste Antwort und Sie können hinzufügen .tooltip('show');, damit sie nach dem Update angezeigt wird
Jared
Dies ist die einzige Lösung (von vielen, die versucht wurde), die nur zu funktionieren schien (bs3). Gute Lösung sicher!
Jyoseph
3
Diese Lösung ist besser als alle anderen
Ayyaz Zafar
14

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

$(myEl)
    .attr('title', newTitle)
    .tooltip('fixTitle')
    .tooltip('setContent')
BenG
quelle
3
Dies, mit .tooltip('show')am Ende der Kette, hat bei mir funktioniert.
Markau
1
Ja, setContentund showmacht den Trick! Sie können data-original-titledirekt ändern, anstatt zu verwendenfixTitle
brauliobo
Getestet auf Bootstrap v2.3.1
Ricardo
13

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

ndreckshage
quelle
5
Sagt $tip ist kein Attribut von$(element)
Augustin Riedinger
Hab das gemacht:$(element).attr('title', newTitle).tooltip('fixTitle').parent().find('.tooltip .tooltip-inner').text(newTitle);
Augustin Riedinger
Ich aktualisiere einen Tooltip für ein benachbartes Element, wenn ich in ein Textfeld tippe, und der Tooltip verschwindet für mich mit diesem Code, wenn ich eine Taste drücke.
tremby
Danke dafür. Das einzige Problem bei dieser Lösung besteht darin, dass die Position der QuickInfos nach der Textänderung durcheinander gebracht wird.
Wojciech Zylinski
13

für Bootstrap 4:

$(element).attr("title", "Copied!").tooltip("_fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("_fixTitle");
Bass
quelle
2
Dies verwendet eine undokumentierte API. In acht nehmen.
Chloe
9

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');
Relational
quelle
7
Mit Bootstrap 3 wird es$('#tooltip_id').data('bs.tooltip').options.title = 'New_value!';
ajbeaven
Hey relational, könnten Sie Ihre Antwort ändern, um die Korrekturen der Kommentare widerzuspiegeln? Vielen Dank.
Thouliha
7

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.

empa
quelle
7

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.

Ivijan Stefan Stipić
quelle
6

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

$(element).attr('data-original-title', newValue);
Morteza QorbanAlizade
quelle
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>

Chloe
quelle
4

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
    });
}
aknuds1
quelle
1
Beste Antwort auf diese Frage.
Daniel Miliński
@ DanielMiliński Danke :)
aknuds1
1
Wenn Sie boostrap3 verwenden, müssen Sie data('bs.tooltip')anstelle vondata('tooltip')
Nigel Angel
3

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.

Martin Lyne
quelle
Sollten wir $ (el) .tooltip ('dispose') vor oder nach dem Aktualisieren des Tooltip-Titels aufrufen?
Fifi
@imabot entsorgt den alten Tooltip und erstellt ihn mit neuen Daten neu. Wenn Ihre Tooltips komplex sind, möchten Sie möglicherweise die ursprüngliche Konfiguration abrufen oder auf andere Weise speichern, damit Sie sie einfach mit dieser Konfiguration + neuen Werten neu erstellen können. Hoffe das macht Sinn.
Martin Lyne
2

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.

Studio 42 Frankreich
quelle
2

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

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

Glücklich
quelle
1

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
});
jerin
quelle
1

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

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

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

    }
René Fernández
quelle
0

Ä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.&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 */);
});
Nate
quelle
0

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.

Omabra
quelle
0

Mit Tooltip-Objekt Boostrap:

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

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>

Sherif Salah
quelle
0

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

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

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);
Saifee
quelle
-1

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

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

Amin
quelle