Как обновить содержимое в JQuery UI Tooltip в реальном времени?

Ответ 1

Вы можете изменить содержимое JQuery Tooltip после инициализации следующим образом:

$( ".selector" ).tooltip( "option", "content", "Awesome title!" );

Вот демон .

Подробнее см. API.

Ответ 2

Я просто столкнулся с этим сам, и другие ответы здесь не затрагивают проблему, о которой спрашивал OP (та же самая проблема, которую я имел): как заставить JQueryUI Tooltip изменить его содержимое при изменении "title" "атрибут элемента, который имеет всплывающую подсказку. У меня был вход без атрибута "title" , который был проверен с помощью AJAX против сервера, и если он недействителен, я меняю класс CSS и добавляю "заголовок ", чтобы указать на ошибку, и рассчитывая на подсказку jQuery UI для" просто работайте".

Я установил всплывающие подсказки в соответствии с документацией JQUI, используя $(document).tooltip(), чтобы получить дефолтное поведение по умолчанию (которое отображает всплывающую подсказку для каждого включенного элемента с атрибутом "title" ). Затем, когда моя проверка ajax использовала $("#inputid").attr("title", "validation error");, все было прекрасно, любое мое сообщение об ошибке появилось как всплывающая подсказка, когда мой ввод зависал.

Однако удаление атрибута "title" после того, как пользователь скорректировал входное значение, вызвав $("#inputid").removeAttr("title"); оказалось неудобным - поскольку атрибут "title" загадочно снова появится вместе с подсказкой.

После небольшого копания я обнаружил, что это связано с тем, что виджет всплывающей подсказки хранит атрибут "title" в другом месте (с помощью .data("ui-tooltip-content"...)), чтобы отключить фактические всплывающие подсказки браузера, а затем восстанавливает его (вот почему "заголовок" "атрибут был таинственным образом появляющимся.

Итак, "правильный" (или, возможно, самый простой) ответ на вопрос OP состоит в том, чтобы временно отключить функциональную возможность jQueryUI перед изменением (или удалением) атрибута "title" , а затем снова включить его, -Изменить содержание и поступать правильно. Так что-то вроде этого:

// first, disable tooltips
$(document).tooltip("disable");

// Make your change to the element title
$("#inputid").attr("title", "new message");
    or ...
$("#inputid").removeAttr("title");

// re-enable tooltips
$(document).tooltip("enable");

Вот и все! Проблема с использованием .tooltip("option", "content", "some text"), как указано выше, заключается в том, что вам нужно вручную определять каждую всплывающую подсказку, которую вы хотите показать, - конечно, много кодирования без необходимости, если все, что вам нужно, - это всплывающие подсказки "просто работать" с содержимым страницы.

Ответ 3

Мой первый ответ был неправильным, извините за это.

<div id='mybody'>
  <p title='Some tooltip'>paragraph</p>
</div>

JavaScript:

function reloadToolTip(text){
  $('#mybody p').tooltip({contents:text});
}

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

Edit:

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

function reloadToolTip(text){
  $('#mybody p').tooltip({contents:text}).tooltip('close').tooltip('open');
}

Ответ 4

Здесь другое решение, которое хорошо работает для меня - просто добавьте это в $(function(){ // code here });:

$(document).tooltip({
    content: function()
    {
        var $this = $(this);
        return $this.attr('title');
    }
});

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

Технически я не тестировал, работает ли это с attr('title') (я предполагаю, что это будет).

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

<div class="title" data-note="This is my tooltip text<br>with line break"></div>

и

$(document).tooltip({
    items: ".title",
    content: function()
    {
        var $this = $(this);
        if ($this.data('note') != '')
        {
            return unescape($this.data('note'));
        }
        else
        {
            return false;
        }
    }
});

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

Ответ 5

Почему бы так не сделать?

HTML:

 <input class="input-change" id="input1" type="text" title="Test1" value="Input #1">
 <input class="input-change" id="input2" type="text" title="Test2" value="Input #2">
 <input class="input-change" id="input3" type="text" title="Test3" value="Input #3">

JQuery

// Every time a key is pressed (for the sake of example)
$(function(){
    // Initialize tooltip
    $('.input-change').tooltip();

    // Every time a key is pressed (again, for the sake of example)
    $(".input-change").keyup(function(){
        // Get the actual value of the input that has changed (again, for the sake of example)
        var inputValue = $(this).val();

        // Get the id of the input that has changed
        var idInputChanged = "#" + $(this).attr('aria-describedby');

        // Go directly to the <div> inside the tooltip and change the text
        $(idInputChanged + ' div').html('Text changed in real time without closing tooltip!:<br />' + inputValue);
    });
})

Пример JSFiddle:

http://jsfiddle.net/4MT5R/

Ответ 6

Мой пример использования включал установку сообщения об успешном завершении/сбое при щелчке элемента подсказки (для копирования URL-адреса в буфер обмена), а затем сброса его, когда элемент потерял зависание, поэтому исходное сообщение будет отображаться, когда элемент снова будет виден.

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

var msg = 'New message';

// Cache $target
var $target = $(event.target);

// First close tooltip, which should be open on hover
$target.tooltip('close');

// Get the original message
var oldMsg = $target.tooltip("option", "content");

// Set the tool tip to the success/fail message
$target.tooltip("option", "content", msg);

// Open the tooltip with the new message
$target.tooltip('open');

// For some reason, the tooltip doesn't close automatically
// unless the hide option is reset
$target.tooltip("option", "hide", {effect: "fade", duration: 1000});

// Set message back to original after close.
$target.on("tooltipclose", function (event, ui) {
    $(this).tooltip("option", "content", oldMsg);
});