Изменить содержимое всплывающей подсказки Twitter Bootstrap

В 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');

Для начальной загрузки 3.x

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Я думаю, что Мехмет Дюран почти прав, но были некоторые проблемы при использовании нескольких классов с одной и той же всплывающей подсказкой и их размещением. В следующем коде также избегается проверка ошибок js, если есть класс, называемый "tooltip_class". Надеюсь, это поможет.

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

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

    }

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

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

Это сработало для меня: (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 в заголовке всплывающей подсказки.

Я не мог получить ни один из ответов, здесь обход:

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

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

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

Измените текст, напрямую изменив текст в элементе. (не обновляет положение всплывающей подсказки).

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