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

Question

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

Answer 1

Только что нашел это сегодня, читая исходный код.Так что $.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');

Answer 2

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

ОБНОВЛЕНИЕ: Вы можете добавить .tooltip ('show'), чтобы немедленно показать изменения, вам не нужно указывать мышью и цель наведения мыши, чтобы увидеть изменение в заголовке

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

Answer 3

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

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

Answer 4

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

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

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

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

Answer 5

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

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

Answer 6

для Bootstrap 4:

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

Answer 7

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

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

Answer 8

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>

Answer 9

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

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

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

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

Answer 10

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

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

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