У мене є підказка на елементі якоря, який надсилає запит AJAX при натисканні. Цей елемент має підказку (від Twitter Bootstrap). Я хочу, щоб вміст підказок змінився, коли запит AJAX успішно повертається. Як я можу маніпулювати підказкою після початку?

Щойно знайшов це сьогодні, читаючи вихідний код. Отже, $.tooltip(string)викликає будь-яку функцію в Tooltipкласі. І якщо ви подивитесь Tooltip.fixTitle, він отримує data-original-titleатрибут і замінює його значення заголовка.

Тому ми просто робимо:

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

і, безумовно, він оновлює заголовок, який є значенням підказки.

Інший спосіб (див. Коментар @lukmdo нижче):

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

У Bootstrap 3 достатньо викликати, elt.attr('data-original-title', "Foo")оскільки зміни в "data-original-title"атрибуті вже викликають зміни на екрані підказки.

ОНОВЛЕННЯ: Ви можете додати .tooltip ('показати'), щоб показати зміни негайно, вам не потрібно наводити курсор миші та наведення миші, щоб побачити зміни в заголовку

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

Ви можете оновити текст підказки, фактично не викликаючи показ / приховування:

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

ось приємне рішення, якщо ви хочете змінити текст, не закриваючи та не відкриваючи підказки.

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

таким чином, текст замінюється без закриття підказки (не перестановка, але якщо ви робите зміну одного слова тощо, це повинно бути добре). а коли ви відміните + назад на підказці, вона все одно оновлюється.

** це завантажувальна програма 3, для 2 вам, ймовірно, доведеться змінити назви даних / класів

для Bootstrap 4:

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

Це працює, якщо підказка була інстанційною (можливо, з javascript):

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

Для завантажувача 3.x

Це здається найчистішим рішенням:

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

Show використовується для одразу оновлення заголовка, а не для того, щоб чекати, коли підказку буде приховано та знову показано.

Ось оновлення для Bootstrap 4 :

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

Але найкращий спосіб - це зробити так:

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

або вбудований:

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

З боку UX ви просто бачите, що текст змінюється без вицвітання або приховування / показувати ефекти, і немає необхідності в цьому _fixTitle.

Ви можете просто змінити, data-original-titleвикористовуючи наступний код:

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

Завантаження 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>

Наступне працювало найкраще для мене, в основному я записую будь-яку наявну підказку і не намагаюся показувати нову підказку. Якщо дзвінок відображається на підказці, як і в інших відповідях, він з’являється, навіть якщо курсор не нависає над ним.

Причина, через яку я вирішив це рішення, полягає в тому, що інші рішення, повторно використовуючи наявну підказку, призвели до деяких дивних проблем із підказкою, яка іноді не відображається при наведенні курсору над елементом.

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

У завантажувальній програмі 4 я просто використовую $(el).tooltip('dispose');потім відтворюю як звичайне. Таким чином, ви можете поставити розпорядження перед функцією, яка створює підказку, щоб переконатися, що вона не подвоюється.

Потрібно перевірити стан та поводитись із значеннями, здається менш доброзичливим.

Ви можете встановити вміст під час виклику підказки за допомогою функції

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

Вам не доведеться використовувати лише заголовок викликаного елемента.

Дякуючи, цей код був дуже корисним для мене, я вважав його ефективним у своїх проектах

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

Знищіть будь-яку попередню підказку, щоб ми могли переселити новий вміст підказки

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

Я не зміг отримати жодну відповідь, ось вирішення:

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

Я думаю, що Мехмет Дуран майже правий, але були деякі проблеми при використанні декількох класів з однаковою підказкою та їх розміщення. Наступний код також дозволяє уникнути перевірки помилок js, чи є клас, який називається "tooltip_class". Сподіваюсь, це допомагає.

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

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

    }

Змініть текст, змінивши текст безпосередньо в елементі. (не оновлює положення підказки).

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

Змініть текст, знищивши стару підказку, потім створивши та показавши нову. (Змушує стару згасати, а нову згасати)

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

Я використовую верхній метод, щоб анімувати "Збереження". повідомлення (використовуючи &nbspтак, що підказка не змінюється за розміром) та щоб змінити текст на "Готово". (плюс прокладка), коли запит завершено.

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

Це працювало для мене: (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>

Атрибут data-html="true"дозволяє використовувати html у назві підказки.

З об'єктом підказки Boostrap:

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

Для BS4 (і BS3 з незначними змінами) .. після годин пошуку та випробувань я придумав найнадійніше рішення цієї проблеми, і він навіть вирішує проблему відкриття більше, ніж одного (підказки або переходу) одночасно, і проблема відкриття автоматично після втрати фокусу тощо.

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

Я тестував це лише у завантажувальному 4 та без виклику .show ()

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

Ви можете використовувати цей код, щоб приховати підказку інструмента змінити назву та знову показати підказку, коли запит ajax успішно повернеться.

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

Я використовую цей простий вихід:

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

Корисно, якщо вам потрібно змінити текст підказки після його ініціалізації з attr 'data-original-title'.