Mam podpowiedź dotyczącą elementu kotwicy, który wysyła żądanie AJAX po kliknięciu. Ten element ma etykietkę (z Twittera Bootstrap). Chcę, aby treść podpowiedzi zmieniła się po pomyślnym zwróceniu żądania AJAX. Jak mogę manipulować etykietką po inicjacji?

Właśnie to znalazłem dzisiaj podczas czytania kodu źródłowego. Wywołuje więc $.tooltip(string)dowolną funkcję w Tooltipklasie. A jeśli spojrzysz Tooltip.fixTitle, pobiera data-original-titleatrybut i zastępuje go wartością tytułu.

Po prostu wykonujemy:

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

i oczywiście aktualizuje tytuł, który jest wartością w podpowiedzi.

Inny sposób (patrz komentarz @lukmdo poniżej):

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

W Bootstrap 3 wystarczy wywołać, elt.attr('data-original-title', "Foo")ponieważ zmiany w "data-original-title"atrybucie już powodują zmiany w wyświetlaniu podpowiedzi.

AKTUALIZACJA: Możesz dodać .tooltip („pokaż”), aby natychmiast pokazać zmiany, nie musisz najeżdżać myszką i najeżdżać kursorem myszy, aby zobaczyć zmianę w tytule

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

możesz zaktualizować tekst podpowiedzi bez wywoływania show / hide:

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

oto dobre rozwiązanie, jeśli chcesz zmienić tekst bez zamykania i ponownego otwierania podpowiedzi.

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

w ten sposób tekst zamieniany jest bez zamykania podpowiedzi (nie zmienia położenia, ale jeśli zmieniasz jedno słowo itp., powinno być dobrze). a kiedy najedziesz myszką na + podpowiedź, jest ona nadal aktualizowana.

** to jest bootstrap 3, dla 2 prawdopodobnie musisz zmienić nazwy danych / klas

dla Bootstrap 4:

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

Działa to, jeśli instancja podpowiedzi została utworzona (prawdopodobnie za pomocą javascript):

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

Dla bootstrap 3.x

To wydaje się najczystszym rozwiązaniem:

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

Program Show służy do natychmiastowej aktualizacji tytułu i nie czeka na ukrywanie podpowiedzi i wyświetlenie jej ponownie.

Oto aktualizacja Bootstrap 4 :

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

Ale najlepszym sposobem jest zrobienie tego w następujący sposób:

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

lub inline:

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

Po stronie UX widać tylko, że tekst jest zmieniany bez efektów blaknięcia lub ukrywania / pokazywania i nie ma takiej potrzeby _fixTitle.

Możesz po prostu zmienić data-original-titlenastępujący kod:

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

Poniższe działało dla mnie najlepiej, w zasadzie usuwam wszystkie istniejące podpowiedzi i nie zawracam sobie głowy wyświetlaniem nowej podpowiedzi. Jeśli wywołujesz show w podpowiedzi, tak jak w innych odpowiedziach, wyskakuje, nawet jeśli kursor nie unosi się nad nim.

Powodem, dla którego zdecydowałem się na to rozwiązanie, jest to, że inne rozwiązania, ponownie wykorzystujące istniejącą etykietkę, doprowadziły do ​​dziwnych problemów z etykietką, która czasami nie wyświetlała się po najechaniu kursorem nad element.

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

W bootstrap 4 po prostu używam, $(el).tooltip('dispose');a następnie odtwarzam jak zwykle. Możesz więc umieścić dispose przed funkcją, która tworzy etykietkę, aby mieć pewność, że się nie podwoi.

Konieczność sprawdzania stanu i majsterkowania z wartościami wydaje się mniej przyjazna.

Możesz ustawić zawartość w wywołaniu podpowiedzi za pomocą funkcji

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

Nie musisz używać tylko tytułu wywoływanego elementu.

Dzięki temu ten kod był dla mnie bardzo pomocny, okazał się skuteczny w moich projektach

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

Zniszcz wszelkie istniejące wcześniej podpowiedzi, abyśmy mogli ponownie wypełnić nową zawartość podpowiedzi

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

Nie udało mi się uzyskać odpowiedzi, oto obejście:

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

Myślę, że Mehmet Duran ma prawie rację, ale wystąpiły pewne problemy podczas korzystania z wielu klas z tą samą etykietką i ich rozmieszczeniem. Poniższy kod pozwala również uniknąć błędów js podczas sprawdzania, czy istnieje jakaś klasa o nazwie „tooltip_class”. Mam nadzieję że to pomoże.

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

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

    }

Zmień tekst, zmieniając bezpośrednio tekst w elemencie. (nie aktualizuje pozycji podpowiedzi).

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

Zmień tekst, niszcząc stary podpowiedź, a następnie tworząc i pokazując nowy. (Powoduje, że stary znika, a nowy znika)

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

Używam najwyższej metody, aby animować „Zapisywanie”. wiadomość (za pomocą&nbsp aby podpowiedź nie zmieniała rozmiaru) i zmienić tekst na „Gotowe”. (plus dopełnienie) po zakończeniu żądania.

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

To działało dla mnie: (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>

Atrybut data-html="true"pozwala na użycie HTML w tytule podpowiedzi.

Z obiektem Podpowiedź Boostrap:

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

W przypadku BS4 (i BS3 z niewielkimi zmianami) .. po godzinach poszukiwań i prób znalazłem najbardziej niezawodne rozwiązanie tego problemu, a nawet rozwiązuje problem otwierania więcej niż jednego (etykietka lub popover) w tym samym czasie, oraz problem z automatycznym otwieraniem po utracie ostrości itp.

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

Testowałem to tylko w bootstrap 4 i bez wywołania .show ()

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

możesz użyć tego kodu, aby ukryć podpowiedź, zmienić jej tytuł i ponownie wyświetlić podpowiedź, gdy żądanie ajax zwróci się pomyślnie.

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

Korzystam z tego łatwego wyjścia:

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

Przydaje się, jeśli trzeba zmienić tekst podpowiedzi po zainicjowaniu jej przy pomocy attr „data-original-title”.