Как переписать всплывающую подсказку twitter bootstrap?

Я использую всплывающие подсказки из пакета Bootstrap Twitter, чтобы отображать информацию о элементах на странице. Иногда информация изменяется и нуждается в обновлении в всплывающей подсказке. Я попробовал просто повторно инициализировать всплывающую подсказку с новым заголовком:

$('#selector').tooltip({ title: 'new text'});

Однако заголовок подсказки не изменяется с новым текстом. Он остается таким же, как он был установлен на начальном этапе. Любые идеи, почему, и есть ли какая-нибудь работа вокруг? Спасибо!

Ответ 1

Обновление: Как указано @Nigel-Angel, TWBS v3 использует data('bs.tooltip')

Вы не можете переопределить объект всплывающей подсказки, как только вы его инициализировали на одном элементе. Но вы можете удалить его и сделать это снова.

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

$('#selector').data('tooltip',false)          // Delete the tooltip
              .tooltip({ title: 'new text'});

Возможно, потребуется удалить слушателей, но он работает так.

Ответ 2

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

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

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

Спасибо lukmdo

Ответ 3

По какой-то причине это не сработало для меня (bootstrap 2.1.1). Что мне нужно было сделать:

    $('#element').tooltip('destroy');
    $("#element").tooltip({'placement':'right', 'title':'larger larger text title'});
    $("#element").tooltip('show');

Ответ 4

Я использую bootstrap 3, и ни один из них не работал у меня без ошибок. Уничтожение всплывающей подсказки с помощью .tooltip('destroy') и воссоздание ее в той же функции .tooltip({...}) приведет к тому, что всплывающая подсказка перестанет работать. Он работал только в том случае, если звонок для отдыха был сделан позже, после того, как вызов уничтожения завершился, он работает асинхронно (следовательно, почему немедленный отдых был сбит).

Предложения по уничтожению внутренних данных .data('tooltip',false) не работали. Во-первых, с бутстрапом 3 это будет data('bs.tooltip, false), и когда это будет вызвано, если всплывающая подсказка будет отображаться в данный момент, это приведет к ее утечке и оставит его отображаемым навсегда. Новая всплывающая подсказка будет отображаться и скрываться поверх нее.

Моим окончательным решением было:

$x.tooltip('hide');
$x.data('bs.tooltip', false);
$x.tooltip({ ... }) // recreate it

Обратите внимание, что также изменение названия с помощью .attr('title', '...') и подобных решений и вызов .tooltip('fixupTitle') отработано - но отбросил параметр placement и, вероятно, также другие параметры, и сделал всплывающую подсказку, которая была помещена наверху элемента а не справа, как это было первоначально. Возможно, у него даже были некоторые другие ошибки, перечисленные выше, которые можно увидеть в других вариантах этого решения, но я не выглядел намного дальше.

Ответ 5

@Sherbrow Вы можете использовать самый простой вариант. Не отправляйте это сложное решение. Вот пример кода.

$('#spanUsername').prop('title', newValue);

Ответ 6

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

$('#tooltip_selector').attr('data-original-title', 'New Title Here');