Метод content

Метод content библиотеки Tooltipster используется для управления содержимым всплывающей подсказки. Он позволяет динамически получать или задавать контент тултипов после инициализации, что делает работу с подсказками гибкой и адаптивной к изменениям DOM или данным, поступающим из API.

Синтаксис

// Получение текущего содержимого
var currentContent = $(element).tooltipster('content');

// Установка нового содержимого
$(element).tooltipster('content', newContent);

Параметры метода:

  • newContent – новое содержимое тултипа. Может быть:

    • Строка HTML

      $(element).tooltipster('content', '<strong>Привет!</strong>');

    • DOM-элемент

      var div = document.createElement('div');
div.textContent = 'Динамический контент';
$(element).tooltipster('content', div);

    • jQuery-объект

      var $div = $('<div>Текст из jQuery</div>');
$(element).tooltipster('content', $div);

    • Функция обратного вызова – используется для динамической генерации контента на лету:

      $(element).tooltipster('content', function(instance, helper){
    return 'Сгенерированный контент: ' + new Date().toLocaleTimeString();
});

Получение содержимого

Если метод вызывается без аргументов:

var current = $(element).tooltipster('content');
  • Возвращает текущее содержимое тултипа.
  • Полезно для проверки состояния или использования текущего контента в логике приложения.
  • Результат может быть строкой, jQuery-объектом или DOM-элементом, в зависимости от того, как был установлен контент.

Установка нового содержимого

Метод принимает один аргумент – новое содержимое тултипа. Важные особенности:

  1. HTML-разметка Tooltipster по умолчанию интерпретирует строки как HTML, поэтому можно использовать теги для форматирования текста.

    $(element).tooltipster('content', '<em>Италик</em> и <strong>жирный</strong>');

  2. Динамический контент через функцию Функция получает два аргумента:

    • instance – объект тултипа, позволяющий управлять его поведением.
    • helper – объект с информацией о событии и контексте (например, элемент, вызвавший тултип).
    $(element).tooltipster('content', function(instance, helper){
    return 'Элемент: ' + helper.origin.textContent;
});

    Такой подход удобен для обновления информации на основе состояния страницы, сетевых запросов или пользовательских данных.

  3. DOM-элементы и jQuery-объекты Если передать DOM-элемент или jQuery-объект, Tooltipster автоматически клонирует его для отображения. Это позволяет использовать уже существующие элементы страницы без дублирования кода.

Особенности и рекомендации

  • Перерендер тултипа: после изменения содержимого Tooltipster автоматически обновляет отображение при следующем показе.

  • Поддержка анимаций: новые данные будут отображены с заданной анимацией появления тултипа.

  • Асинхронный контент: для работы с AJAX можно использовать функцию обратного вызова и возвращать результат через промис:

    $(element).tooltipster('content', function(instance, helper){
    return $.get('/tooltip-data/' + helper.origin.dataset.id);
});

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

    $(element).tooltipster('content', 'Загрузка...');

  • Управление сложными структурами: метод content поддерживает вставку контейнеров с внутренними элементами, таблицами, изображениями и формами.

Примеры практического использования

1. Изменение контента по событию:

$('#button').on('click', function(){
    $('#tooltip-target').tooltipster('content', 'Контент обновлен!');
});

2. Использование текущего контента для логики:

var currentText = $('#tooltip-target').tooltipster('content');
if(currentText.includes('ошибка')){
    $('#tooltip-target').tooltipster('content', 'Исправлено!');
}

3. AJAX-подгрузка данных:

$('#tooltip-target').tooltipster({
    functionBefore: function(instance, helper){
        if(!instance.contentSet){
            $.get('/api/info', function(data){
                instance.content(data);
                instance.contentSet = true;
            });
        }
    }
});

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

Оглавление