У меня есть всплывающая подсказка для элемента привязки, которая отправляет запрос AJAX по щелчку. Этот элемент имеет всплывающую подсказку (из Twitter Bootstrap). Я хочу, чтобы содержимое всплывающей подсказки изменялось при успешном завершении запроса AJAX. Как я могу манипулировать всплывающей подсказкой после инициации?
224
$(element).attr('title', 'NEW_TITLE').tooltip('fixTitle').tooltip('show');
$(element).attr('data-original-title', newValue).tooltip('show');
было самым простым рабочим решением для меня.В Bootstrap 3 достаточно вызвать, так
elt.attr('data-original-title', "Foo")
как изменения в"data-original-title"
атрибуте уже вызывают изменения в отображении всплывающей подсказки.ОБНОВЛЕНИЕ: Вы можете добавить .tooltip ('show'), чтобы показать изменения немедленно, вам не нужно указывать мышью и цель наведения мыши, чтобы увидеть изменение в заголовке
источник
.tooltip('show');
его, чтобы показать после обновленияВы можете обновить текст всплывающей подсказки без фактического вызова show / hide:
источник
.tooltip('show')
конца цепи, работало для меня.setContent
иshow
делает трюк! Вы можете изменитьdata-original-title
непосредственно вместо использованияfixTitle
Вот отличное решение, если вы хотите изменить текст без закрытия и повторного открытия подсказки.
таким образом, текст заменяется без закрытия всплывающей подсказки (не перемещается, но если вы изменяете одно слово и т. д., все должно быть в порядке). и когда вы отпираете + всплывающую подсказку, она все еще обновляется.
** это загрузчик 3, для 2 вы, вероятно, должны изменить имена данных / классов
источник
$tip
, не является атрибутом$(element)
$(element).attr('title', newTitle).tooltip('fixTitle').parent().find('.tooltip .tooltip-inner').text(newTitle);
для Bootstrap 4:
источник
Это работает, если всплывающая подсказка была создана (возможно, с помощью javascript):
источник
$('#tooltip_id').data('bs.tooltip').options.title = 'New_value!';
Для начальной загрузки 3.x
Это кажется самым чистым решением:
Шоу используется для немедленного обновления заголовка, а не для ожидания скрытия и повторного отображения всплывающей подсказки.
источник
Вот обновление для Bootstrap 4 :
Но лучший способ сделать это так:
или встроенный:
Со стороны UX вы просто видите, что текст изменяется без эффектов замирания или скрытия / показа, и в этом нет необходимости
_fixTitle
.источник
Вы можете просто изменить,
data-original-title
используя следующий код:источник
Bootstrap 4
https://getbootstrap.com/docs/4.1/components/tooltips/#tooltipdispose
источник
Следующее сработало лучше всего для меня, в основном, я удаляю любую существующую подсказку и не удосужился показать новую подсказку. При вызове show во всплывающей подсказке, как и в других ответах, оно всплывает, даже если курсор не находится над ним.
Причина, по которой я остановился на этом решении, состоит в том, что другие решения, повторно использующие существующую подсказку, привели к некоторым странным проблемам с подсказкой, которые иногда не отображаются при наведении курсора на элемент.
источник
data('bs.tooltip')
вместоdata('tooltip')
В bootstrap 4 я просто использую, а
$(el).tooltip('dispose');
затем воссоздаю как обычно. Таким образом, вы можете поместить dispose перед функцией, которая создает всплывающую подсказку, чтобы убедиться, что она не удваивается.Необходимость проверять состояние и возиться с ценностями кажется менее дружелюбной.
источник
Вы можете установить контент при вызове всплывающей подсказки с помощью функции
Вам не нужно использовать только заголовок вызываемого элемента.
источник
Спасибо, этот код был очень полезным для меня, я нашел его эффективным в моих проектах
$(element).attr('title', 'message').tooltip('fixTitle').tooltip('show');
источник
Уничтожьте любую ранее существующую подсказку, чтобы мы могли заполнить ее новым содержанием
источник
Я не смог получить ни одного из ответов, вот обходной путь:
источник
Я думаю, что Мехмет Дюран почти прав, но были некоторые проблемы при использовании нескольких классов с одинаковыми подсказками и их размещением. Следующий код также избегает проверки ошибок js, если есть какой-либо класс с именем «tooltip_class». Надеюсь это поможет.
источник
Измените текст, изменив текст в элементе напрямую. (не обновляет позицию всплывающей подсказки).
Измените текст, уничтожив старую подсказку, а затем создав и отобразив новую. (Заставляет старый исчезать, а новый исчезать)
Я использую метод top, чтобы оживить «Сохранение». сообщение (при
 
этом всплывающая подсказка не изменяется по размеру) и изменить текст на «Готово». (плюс дополнение), когда запрос завершен.источник
Это сработало для меня: (загрузчик 3.3.6; jquery = 1.11.3)
Атрибут
data-html="true"
позволяет использовать html в заголовке всплывающей подсказки.источник
С всплывающей подсказкой объекта Boostrap:
источник
Для BS4 (и BS3 с небольшими изменениями) .. после нескольких часов поиска и испытаний, я нашел самое надежное решение этой проблемы, и оно даже решает проблему открытия более одного (всплывающая подсказка или всплывающее окно) одновременно, и проблема автоматического открытия после потери фокуса и т. д.
источник
Я только протестировал это в начальной загрузке 4 и без вызова .show ()
источник
Вы можете использовать этот код, чтобы скрыть подсказку, изменить ее заголовок и снова показать подсказку, когда запрос ajax успешно завершится.
источник
Я использую этот простой выход:
источник
Полезно, если вам нужно изменить текст всплывающей подсказки после того, как он был инициализирован с помощью attr 'data-original-title'.
источник