Вложенные тултипы

Tooltipster позволяет создавать динамические и интерактивные подсказки, которые могут содержать любые элементы HTML. В сложных интерфейсах часто возникает необходимость отображать вложенные тултипы — подсказки, находящиеся внутри другой подсказки. Это полезно для демонстрации дополнительной информации без перегрузки основного интерфейса.

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

Инициализация родительского тултипа

Родительский тултип создается стандартным методом .tooltipster(). Ключевой момент — указание контента как HTML, чтобы внутри подсказки можно было размещать элементы для вложенных тултипов:

$('#parent').tooltipster({
    content: $('<div class="parent-content">Основная подсказка<div class="child-target">Детали</div></div>'),
    theme: 'tooltipster-light',
    interactive: true,
    trigger: 'click',
    side: 'bottom'
});

Объяснение параметров:

  • interactive: true — позволяет взаимодействовать с содержимым тултипа без его закрытия при клике.
  • trigger: 'click' — открывает тултип по клику, что особенно удобно для вложенных элементов.
  • content может быть как строкой, так и jQuery-элементом, что дает гибкость для вставки вложенных структур.

Создание вложенного тултипа

Для вложенного тултипа необходимо инициализировать его после того, как родительский тултип полностью отображен. Tooltipster предоставляет событие ready, которое идеально подходит для этой задачи:

$('#parent').on('tooltipster-ready', function(event) {
    $('.child-target').tooltipster({
        content: 'Дополнительная информация',
        theme: 'tooltipster-noir',
        interactive: true,
        trigger: 'hover',
        side: 'right'
    });
});

Здесь важно учитывать:

  1. Инициализация дочернего тултипа внутри события ready родителя — гарантирует, что элемент уже присутствует в DOM.
  2. Разные триггеры для родителя и дочернего тултипа — это позволяет избежать конфликтов при открытии и закрытии.

Управление видимостью

Вложенные тултипы требуют точного контроля событий show и hide. Tooltipster предоставляет методы open() и close(), а также события:

  • tooltipster-show
  • tooltipster-hide

Пример программного управления:

$('#parent').on('tooltipster-show', function() {
    console.log('Родительский тултип открыт');
});

$('.child-target').on('tooltipster-show', function() {
    console.log('Вложенный тултип открыт');
});

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

$('#parent').on('tooltipster-hide', function() {
    $('.child-target').tooltipster('close');
});

Работа с динамическим контентом

Если содержимое родительского тултипа создается динамически (например, через AJAX), вложенные тултипы нужно инициализировать после вставки контента:

$('#parent').tooltipster({
    content: 'Загрузка...',
    interactive: true,
    trigger: 'click'
});

$('#parent').on('tooltipster-ready', function() {
    $.ajax({
        url: '/get-content',
        success: function(data) {
            $('#parent').tooltipster('content', $(data));
            // Инициализация вложенных тултипов в новом контенте
            $('.child-target').tooltipster({
                content: 'Детали после загрузки',
                theme: 'tooltipster-noir',
                interactive: true
            });
        }
    });
});

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

Настройка позиционирования

Tooltipster позволяет задавать разные стороны отображения для родительского и вложенного тултипов:

$('#parent').tooltipster({ side: 'bottom' });
$('.child-target').tooltipster({ side: 'right' });

Использование параметра functionPosition позволяет динамически изменять позицию, чтобы вложенный тултип не выходил за границы окна:

$('.child-target').tooltipster({
    functionPosition: function(instance, helper, position){
        if(position.coord.top + position.size.height > $(window).height()){
            position.coord.top = $(window).height() - position.size.height - 10;
        }
        return position;
    }
});

Важные рекомендации

  • Всегда использовать interactive: true для тултипов, которые содержат вложенные элементы.
  • Разные триггеры (click для родителя, hover для вложенного) помогают избежать случайного закрытия.
  • Инициализация вложенных тултипов должна выполняться после полной отрисовки родительского контента (tooltipster-ready).
  • Управление событиями show и hide позволяет синхронизировать открытие и закрытие всех уровней подсказок.
  • При динамическом контенте вложенные тултипы создаются после вставки HTML, иначе они не будут работать.

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

Оглавление