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

Question

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

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

С всплывающей подсказкой объекта Boostrap:

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

Answer 6

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

Answer 7

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

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

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

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

Я использую метод top для анимации «Сохранения». сообщение (используя &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 */);
});

Answer 8

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

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

Answer 9

Я использую этот простой выход:

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

Answer 10

$(this).attr('data-original-title', 'click here to publish')
       .tooltip('fixTitle')
       .tooltip('show');

Полезно, если вам нужно изменить текст всплывающей подсказки после того, как он был инициализирован с помощью attr 'data-original-title'.