it-swarm.com.de

Ändern Sie den Inhalt des Twitter Bootstrap-Tooltips durch Klicken

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

203

Habe das heute gerade beim Lesen des Quellcodes gefunden. $.tooltip(string) ruft also jede Funktion innerhalb der Tooltip-Klasse auf. Wenn Sie sich Tooltip.fixTitle anschauen, ruft es das data-original-title-Attribut ab und ersetzt den Titelwert damit. 

Also machen wir einfach:

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

und natürlich aktualisiert es den Titel, den Wert in der QuickInfo. 

Ein anderer Weg (siehe @lukmdo Kommentar unten):

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

In Bootstrap 3 reicht es aus, elt.attr('data-original-title', "Foo") aufzurufen, da Änderungen im "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 Mouse-Out oder Mouseover-Ziel verwenden, um die Änderung im Titel anzuzeigen

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

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

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

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 (ändert sich nicht, aber wenn Sie eine Änderung in einem Wort usw. vornehmen, sollte dies in Ordnung sein). Wenn Sie den QuickInfo wieder verlassen, wird er immer noch aktualisiert.

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

11
ndreckshage

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

Für Bootstrap 3.x

Dies scheint eine sauberste Lösung zu sein:

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

Show wird verwendet, um die Titelaktualisierung sofort vorzunehmen und nicht darauf zu warten, dass Tooltip ausgeblendet und erneut angezeigt wird.

6
empa

Sie können den data-original-title einfach mit dem folgenden Code ändern:

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

für Bootstrap 4:

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

Das Folgende hat für mich am besten funktioniert, im Grunde verwerfe ich jeden vorhandenen Tooltip und kümmere mich nicht darum, den neuen Tooltip anzuzeigen. Wenn in der QuickInfo wie in anderen Antworten eine Show aufgerufen wird, wird sie 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 wiederverwenden, zu seltsamen Problemen führten, wobei der Tooltip manchmal nicht angezeigt wurde, wenn der Cursor über dem Element bewegt wurde.

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

In Bootstrap 4 benutze ich einfach $(el).tooltip('dispose'); und dann wie gewohnt neu. Sie können also die Dispose vor eine Funktion setzen, die einen Tooltip erstellt, um sicherzustellen, dass sie nicht verdoppelt wird.

Den Zustand überprüfen und mit Werten basteln scheint weniger freundlich.

2
Martin Lyne

Vielen Dank, dieser Code war sehr hilfreich für mich. Ich fand ihn bei meinen Projekten effektiv

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

2
Lucky

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.

1

Zerstöre alle bereits vorhandenen Tooltips, damit wir sie mit neuem Tooltip-Inhalt füllen können

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

Ich denke, Mehmet Duran hat fast Recht, aber es gab einige Probleme, wenn mehrere Klassen mit demselben Tooltip und ihrer Platzierung verwendet wurden. Der folgende Code vermeidet außerdem js-Fehler beim Überprüfen, ob eine Klasse namens "tooltip_class" vorhanden ist. Hoffe das hilft.

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

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

    }
0

Mit dem Tooltip-Objekt Boostrap:

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

Das funktionierte für mich: (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>

Das Attribut data-html="true" erlaubt die Verwendung von html im QuickInfo-Titel.

0
omabra

Für BS4 (und BS3 mit geringfügigen Änderungen) .. Nach stundenlangen Suchvorgängen und Versuchen 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 dem Verlust des Fokus 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>

0
Sherif Salah

Ändern Sie den Text, indem Sie den Text im Element direkt ändern. (aktualisiert die QuickInfo-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, einen neuen erstellen und anzeigen. (Bewirkt, dass der alte ausblendet und der neue einblendet)

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

Ich verwende die Top-Methode, um das "Speichern" zu animieren. message (mit &nbsp, damit sich die Größe des Tooltips nicht ändert) und den Text in "Fertig" ä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 */);
});
0
Nate

Ich konnte keine der Antworten erhalten, hier ist eine Problemumgehung:

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