Saya memiliki tooltip pada elemen jangkar, yang mengirimkan permintaan AJAX saat klik. Elemen ini memiliki tooltip (dari Twitter Bootstrap). Saya ingin konten tooltip berubah ketika permintaan AJAX berhasil kembali. Bagaimana saya bisa memanipulasi tooltip setelah inisiasi?

Baru saja menemukan ini hari ini sambil membaca kode sumber. Jadi $.tooltip(string)memanggil fungsi apa pun di dalam Tooltipkelas. Dan jika Anda melihat Tooltip.fixTitle, itu mengambil data-original-titleatribut dan mengganti nilai judul dengannya.

Jadi kami hanya melakukan:

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

dan tentu saja, itu memperbarui judul, yang merupakan nilai di dalam tooltip.

Cara lain (lihat @ lukmdo komentar di bawah):

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

Di Bootstrap 3 cukup untuk memanggil elt.attr('data-original-title', "Foo")karena perubahan pada "data-original-title"atribut sudah memicu perubahan pada tampilan tooltip.

UPDATE: Anda dapat menambahkan .tooltip ('show') untuk segera menampilkan perubahan, Anda tidak perlu mouseout dan mouseover target untuk melihat perubahan pada judul

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

Anda dapat memperbarui teks tooltip tanpa benar-benar memanggil acara / sembunyikan:

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

inilah solusi yang bagus jika Anda ingin mengubah teks tanpa menutup dan membuka kembali tooltip.

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

dengan cara ini, teks diganti tanpa menutup tooltip (tidak memposisikan ulang, tetapi jika Anda melakukan satu perubahan kata dll itu harus baik-baik saja). dan ketika Anda mengarahkan + kembali pada tooltip, itu masih diperbarui.

** ini bootstrap 3, untuk 2 Anda mungkin harus mengubah data / nama kelas

untuk Bootstrap 4:

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

Ini berfungsi jika tooltip telah dipakai (mungkin dengan javascript):

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

Untuk bootstrap 3.x

Ini sepertinya solusi terbersih:

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

Show digunakan untuk membuat pembaruan judul segera dan tidak menunggu tooltip disembunyikan dan ditampilkan lagi.

Berikut ini adalah pembaruan untuk Bootstrap 4 :

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

Tetapi cara terbaik adalah melakukan ini:

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

atau sebaris:

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

Dari sisi UX Anda hanya melihat bahwa teks diubah tanpa efek pudar atau sembunyikan / tampilkan dan tidak perlu _fixTitle.

Anda bisa mengubah data-original-titlemenggunakan kode berikut:

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

Berikut ini bekerja yang terbaik untuk saya, pada dasarnya saya membuang tooltip yang ada dan tidak repot-repot menunjukkan tooltip baru. Jika memanggil show di tooltip seperti di jawaban lain, itu muncul meskipun kursor tidak melayang di atasnya.

Alasan saya pergi untuk solusi ini adalah bahwa solusi lain, menggunakan kembali tooltip yang ada, menyebabkan beberapa masalah aneh dengan tooltip kadang-kadang tidak muncul ketika mengarahkan kursor di atas elemen.

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

Di bootstrap 4 saya hanya menggunakan $(el).tooltip('dispose'); lalu menciptakan kembali seperti biasa. Jadi, Anda dapat meletakkan buang di depan fungsi yang membuat tooltip untuk memastikan itu tidak menggandakan.

Harus memeriksa keadaan dan mengotak-atik nilai tampaknya kurang ramah.

Anda dapat mengatur konten pada panggilan tooltip dengan suatu fungsi

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

Anda tidak harus menggunakan hanya judul elemen yang dipanggil.

Terima kasih kode ini sangat membantu saya, saya merasa efektif pada proyek saya

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

Hancurkan tooltip yang sudah ada sebelumnya sehingga kami dapat mengisi kembali dengan konten tooltip baru

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

Saya tidak bisa mendapatkan jawaban yang berfungsi, berikut ini solusinya:

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

Saya pikir Mehmet Duran hampir benar, tetapi ada beberapa masalah ketika menggunakan beberapa kelas dengan tooltip yang sama dan penempatannya. Kode berikut juga menghindari kesalahan js memeriksa apakah ada kelas yang disebut "tooltip_class". Semoga ini membantu.

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

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

    }

Ubah teks dengan mengubah teks dalam elemen secara langsung. (tidak memperbarui posisi tooltip).

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

Ubah teks dengan menghancurkan tooltip lama, lalu buat dan tampilkan yang baru. (Menyebabkan yang lama memudar dan yang baru memudar)

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

Saya menggunakan metode teratas untuk menghidupkan "Penghematan." pesan (menggunakan &nbspsehingga tooltip tidak berubah dalam ukuran) dan untuk mengubah teks menjadi "Selesai." (plus padding) saat permintaan selesai.

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

Ini bekerja untuk saya: (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>

Atribut data-html="true"memungkinkan untuk menggunakan html pada judul tooltip.

Dengan Boostrap objek Tooltip:

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

Untuk BS4 (dan BS3 dengan perubahan kecil) .. setelah pencarian dan uji coba selama berjam-jam, saya menemukan solusi yang paling dapat diandalkan untuk masalah ini dan bahkan memecahkan masalah membuka lebih dari satu (tooltip atau popover) pada saat yang sama, dan masalah membuka secara otomatis setelah kehilangan fokus, dll.

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

Saya hanya menguji ini di bootstrap 4 & tanpa memanggil .show ()

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

Anda dapat menggunakan kode ini untuk menyembunyikan tip alat, mengubah judulnya, dan menampilkan tooltip lagi, ketika permintaan ajax berhasil kembali.

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

Saya menggunakan jalan keluar yang mudah ini:

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

Berguna jika Anda perlu mengubah teks tooltip setelah diinisialisasi dengan attr 'data-original-title'.