Изменение содержимого подсказки Bootstrap Twitter на клике

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

ОТВЕТЫ

Ответ 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');

Ответ 2

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

Ответ 3

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

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

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

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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

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

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

Ответ 7

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

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

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

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

Ответ 8

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

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

Ответ 9

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

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

Ответ 10

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

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

Ответ 11

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

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

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

    }

Ответ 12

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

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

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

Ответ 13

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

$('.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.&nbsp;&nbsp;': text = 'Saving..&nbsp;'; break;
    case 'Saving..&nbsp;': text = 'Saving...'; break;
    case 'Saving...': text = 'Saving.&nbsp;&nbsp;'; break;
    }
    $('.tooltip-inner', parent).html(text);
}, 250);

send_request( function(){
    // When the request is complete
    clearInterval(interval_id);
    $('.tooltip-inner', parent).html('Done.&nbsp;&nbsp;&nbsp;&nbsp;');
    setTimeout(function() {
        $element.tooltip('hide');
    }, 1500 /* Show "Done." for a bit */);
});

Ответ 14

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

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

Ответ 15

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

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

Ответ 16

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

Ответ 17

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

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