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

вы можете обновить текст подсказки без фактического вызова show / hide:

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

вот хорошее решение, если вы хотите изменить текст без закрытия и повторного открытия всплывающей подсказки.

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

таким образом, текст заменяется без закрытия всплывающей подсказки (не перемещается, но если вы делаете одно изменение слова и т. д., Это должно быть хорошо). и когда вы наводите курсор на + назад на подсказку, она все еще обновляется.

**это bootstrap 3, для 2 вам, вероятно, придется изменить имена данных/классов

это работает, если подсказка была создана (возможно, с помощью javascript):

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

для bootstrap 3.x

это кажется самым чистым решением:

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

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

Вы можете просто изменить data-original-title использовать следующий код:

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

следующее работало лучше всего для меня, в основном я отказываюсь от любой существующей подсказки и не беспокоюсь о том, чтобы показать новую подсказку. Если вызов show на подсказке, как и в других ответах, он появляется, даже если курсор не парит над ним.

причина, по которой я пошел на это решение, заключается в том, что другие решения, повторно используя существующую подсказку, привели к некоторым странным проблемам с подсказкой, иногда не отображаемой при наведении курсора над элементом.

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

для Bootstrap 4:

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

Спасибо этот код был очень полезен для меня, я нашел его эффективным на моих проектах

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

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

необходимость проверять состояние и возиться со значениями кажется менее дружелюбной.

вы можете установить содержимое на вызов всплывающей подсказки с помощью функции

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

вы не должны использовать только название вызываемого элемента.

уничтожьте любую ранее существующую подсказку, чтобы мы могли повторно заполнить ее новым содержимым

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

Я думаю, что Мехмет Дюран почти прав, но были некоторые проблемы при использовании нескольких классов с одной и той же подсказкой и их размещением. Следующий код также позволяет избежать ошибок 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 */);
});

Я не мог получить ни одного из ответов, работающих, вот обходной путь:

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

это сработало для меня: (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');

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>

вы можете использовать этот код, чтобы скрыть подсказку изменить ее название и показать подсказку снова, когда запрос 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'.