Ben bir AJAX isteği tıklama gönderir bir bağlantı elemanı üzerinde bir araç ipucu var. Bu öğenin bir ipucu vardır (Twitter Bootstrap'tan). AJAX isteği başarıyla döndüğünde araç ipucu içeriğinin değişmesini istiyorum. Başlatma işleminden sonra ipucunu nasıl değiştirebilirim?

Kaynak kodunu okurken bunu bugün buldum. Yani sınıf $.tooltip(string)içindeki herhangi bir işlevi çağırır Tooltip. Ve bakarsanız Tooltip.fixTitle,data-original-title özelliği alır ve başlık değerini onunla değiştirir.

Yani basitçe şunu yaparız:

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

ve yeterince emin olun, araç ipucunun içindeki değer olan başlığı günceller.

Başka bir yol (aşağıdaki @lukmdo yorumuna bakın):

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

Önyükleme 3'te elt.attr('data-original-title', "Foo"), "data-original-title"öznitelikteki değişiklikler araç ipucu ekranında zaten değişiklikleri tetiklediğinden çağırmak yeterlidir .

GÜNCELLEME: Değişiklikleri hemen göstermek için .tooltip ('show') ekleyebilirsiniz, başlıktaki değişikliği görmek için fareyle üzerine gelme ve fareyle üzerine gelme hedefini kullanmamanız gerekir

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

araç ipucu metnini gerçekten show / hide çağırmadan güncelleyebilirsiniz:

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

araç ipucunu kapatmadan ve yeniden açmadan metni değiştirmek isterseniz güzel bir çözüm.

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

Bu şekilde, araç ipucu kapatılmadan metin değiştirildi (yeniden konumlandırmıyor, ancak bir kelime değişikliği yapıyorsanız vb. iyi olmalı). ve araç ipucunun üzerine geldiğinizde + geri döndüğünüzde hala güncellenir.

** bu bootstrap 3, 2 için muhtemelen veri / sınıf adlarını değiştirmeniz gerekiyor

Bootstrap 4 için:

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

Araç ipucu başlatılmışsa (muhtemelen javascript ile) bu işe yarar:

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

Bootstrap 3.x için

Bu en temiz çözüm gibi görünüyor:

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

Göster, başlık güncellemesini hemen yapmak ve araç ipucunun gizlenmesini ve tekrar gösterilmesini beklememek için kullanılır.

İşte Bootstrap 4 için güncelleme :

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

Ama en iyi yol böyle yapmaktır:

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

veya satır içi:

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

UX tarafından, metnin solma veya gizleme / gösterme efektleri olmadan değiştirildiğini ve _fixTitle.

Sadece data-original-titleaşağıdaki kodu kullanarak değiştirebilirsiniz :

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

Aşağıdaki benim için en iyi çalıştı, temelde mevcut herhangi bir araç ipucu hurdaya ve yeni araç ipucu göstermek için rahatsız değil. Araç ipucunda diğer yanıtlarda olduğu gibi şov çağrılırsa, imleç imlecin üzerine gelmese bile açılır.

Bu çözüm için gitmemizin nedeni, mevcut araç ipucunu yeniden kullanan diğer çözümlerin, imleci öğenin üzerine getirirken bazen araç ipucuyla ilgili bazı garip sorunlara yol açmasıdır.

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

Bootstrap 4'te sadece $(el).tooltip('dispose');normal olarak yeniden kullanıyorum . Böylece, ikiye katlanmadığından emin olmak için bir araç ipucu oluşturan bir işlevden önce imhayı koyabilirsiniz.

Durumu ve tamircilik değerlerini kontrol etmek daha az kolay görünüyor.

Araç ipucu çağrısında içeriği bir işlevle ayarlayabilirsiniz

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

Yalnızca çağrılan öğenin başlığını kullanmanız gerekmez.

Teşekkürler bu kod benim için çok yararlı oldu, ben projelerim üzerinde etkili buldum

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

Yeni araç ipucu içeriğiyle yeniden doldurabilmemiz için önceden var olan araç ipuçlarını yok edin

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

Yanıtların hiçbirini çalıştıramadım, işte bir çözüm:

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

Mehmet Duran'ın neredeyse haklı olduğunu düşünüyorum, ancak aynı araç ipucu ve bunların yerleştirilmesiyle birden fazla sınıf kullanıldığında bazı sorunlar vardı. Aşağıdaki kod ayrıca "tooltip_class" adı verilen herhangi bir sınıf olup olmadığını denetlemek js hatalarını önler. Bu yardımcı olur umarım.

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

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

    }

Doğrudan öğedeki metni değiştirerek metni değiştirin. (ipucu konumunu güncellemez).

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

Eski araç ipucunu yok edip yeni bir tane oluşturup göstererek metni değiştirin. (Eskisinin kaybolmasına ve yenisinin kaybolmasına neden olur)

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

Her ikisi de "Kaydetme" canlandırmak için üst yöntemi kullanıyorum. mesajını ( &nbsparaç ipucunun boyutu değişmezse) ve metni "Bitti" olarak değiştirmek için. (artı dolgu) isteği tamamladığında.

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

Bu benim için çalıştı: (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>

Bu özellik data-html="true", araç ipucu başlığında html kullanılmasına izin verir.

Araç İpucu nesnesi Boostrap ile:

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

BS4 (ve küçük değişikliklerle BS3) için .. saatlerce arama ve denemelerden sonra, bu sorun için en güvenilir çözümü buldum ve aynı anda birden fazla (araç ipucu veya popover) açma sorununu bile çözüyor, ve odağı kaybettikten sonra otomatik olarak açılma sorunu.

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

Ben sadece bootstrap 4 & w / o arayarak test .show ()

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

ajax isteği başarıyla döndüğünde, araç ipucunun başlığını değiştirmek ve araç ipucunu tekrar göstermek için bu kodu kullanabilirsiniz.

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

Bu kolay yolu kullanıyorum:

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

Bir araç ipucunun metnini attr 'data-original-title' ile başlatıldıktan sonra değiştirmeniz gerektiğinde kullanışlıdır.