Управление группой тултипов

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

Группа тултипов — это логическое объединение нескольких элементов, к которым применён Tooltipster, с возможностью централизованного управления.

Инициализация нескольких тултипов

Создание группы начинается с инициализации Tooltipster на наборе элементов:

$('.tooltip').tooltipster({
    theme: 'tooltipster-default',
    animation: 'fade',
    delay: 200
});

Все элементы с классом .tooltip становятся частью потенциальной группы. Однако сама по себе инициализация не создаёт связей между ними — для этого используется дополнительная логика.

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

Простейший способ управления группой — работа через общий селектор:

$('.tooltip').tooltipster('open');

Открытие всех тултипов:

$('.tooltip').tooltipster('close');

Закрытие всех тултипов.

Особенности подхода

  • Управление выполняется синхронно
  • Не требует дополнительной настройки
  • Подходит для простых сценариев

Создание логических групп

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

<span class="tooltip group-a" title="Подсказка A1"></span>
<span class="tooltip group-a" title="Подсказка A2"></span>
<span class="tooltip group-b" title="Подсказка B1"></span>

Инициализация:

$('.group-a').tooltipster();
$('.group-b').tooltipster();

Управление группами:

$('.group-a').tooltipster('open');
$('.group-b').tooltipster('close');

Синхронизация поведения тултипов

Один из ключевых сценариев — закрытие всех тултипов при открытии нового.

Реализация через события

$('.tooltip').tooltipster({
    functionBefore: function(instance, helper) {
        $('.tooltip').not(helper.origin).tooltipster('close');
    }
});

Объяснение

  • functionBefore вызывается перед открытием тултипа
  • helper.origin — текущий элемент
  • Все остальные тултипы закрываются

Управление через экземпляры (instances)

Tooltipster предоставляет доступ к экземплярам тултипов:

var instances = $.tooltipster.instances();

Каждый экземпляр — объект с методами управления.

Пример закрытия всех тултипов

$.each(instances, function(i, instance) {
    instance.close();
});

Преимущества

  • Полный контроль
  • Независимость от DOM-селекторов
  • Возможность фильтрации

Фильтрация экземпляров

Можно управлять только частью тултипов:

$.each($.tooltipster.instances(), function(i, instance) {
    if ($(instance.elementOrigin()).hasClass('group-a')) {
        instance.open();
    }
});

Группы с уникальным поведением

Каждая группа может иметь собственные настройки:

$('.group-a').tooltipster({
    animation: 'grow',
    delay: 100
});

$('.group-b').tooltipster({
    animation: 'fade',
    delay: 300
});

Ограничение количества открытых тултипов

Частая задача — разрешить только один открытый тултип в группе.

Реализация

$('.tooltip').tooltipster({
    functionBefore: function(instance, helper) {
        $.each($.tooltipster.instances(), function(i, inst) {
            if (inst !== instance) {
                inst.close();
            }
        });
    }
});

Взаимодействие между группами

Можно настроить зависимости между группами:

  • открытие одной группы закрывает другую
  • разные группы реагируют на разные события

Пример

$('.group-a').tooltipster({
    functionBefore: function() {
        $('.group-b').tooltipster('close');
    }
});

Управление через пользовательские события

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

$(document).on('open-group-a', function() {
    $('.group-a').tooltipster('open');
});

$(document).on('close-all-tooltips', function() {
    $('.tooltip').tooltipster('close');
});

Вызов:

$(document).trigger('open-group-a');

Динамическое добавление тултипов в группу

Если элементы добавляются после инициализации:

var newElement = $('<span class="tooltip group-a" title="Новая подсказка"></span>');
$('body').append(newElement);

newElement.tooltipster();

Для включения в группу важно:

  • использовать те же классы
  • применять те же настройки

Работа с асинхронными данными

При загрузке данных с сервера можно формировать группы на лету:

$.ajax({
    url: '/data',
    success: function(data) {
        data.forEach(function(item) {
            var el = $('<span class="tooltip group-a"></span>');
            el.attr('title', item.text);
            $('body').append(el);
            el.tooltipster();
        });
    }
});

Производительность при работе с группами

При большом количестве тултипов важно учитывать:

  • массовые операции (open/close) могут быть затратными
  • лучше использовать выборочную обработку
  • избегать частых циклов по всем экземплярам

Оптимизация

var group = $('.group-a');

group.tooltipster('close');

вместо:

$.each($.tooltipster.instances(), function(i, inst) {
    inst.close();
});

Управление состоянием группы

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

var openTooltips = [];

$('.tooltip').tooltipster({
    functionReady: function(instance) {
        openTooltips.push(instance);
    },
    functionAfter: function(instance) {
        openTooltips = openTooltips.filter(i => i !== instance);
    }
});

Интеграция с пользовательским интерфейсом

Группы тултипов часто управляются через элементы интерфейса:

$('#open-all').on('click', function() {
    $('.tooltip').tooltipster('open');
});

$('#close-all').on('click', function() {
    $('.tooltip').tooltipster('close');
});

Расширенные сценарии

Каскадное открытие

$('.tooltip').each(function(index) {
    var el = $(this);
    setTimeout(function() {
        el.tooltipster('open');
    }, index * 200);
});

Условное отображение

$('.tooltip').tooltipster({
    functionBefore: function(instance, helper) {
        if ($(helper.origin).data('enabled') === false) {
            return false;
        }
    }
});

Ошибки при работе с группами

1. Повторная инициализация

$('.tooltip').tooltipster();
$('.tooltip').tooltipster(); // ошибка

2. Потеря ссылок на экземпляры

Важно не терять доступ к instance при сложной логике.

3. Некорректная фильтрация

Использование неправильных селекторов может привести к управлению лишними элементами.

Практическое применение

  • формы с подсказками ошибок
  • интерактивные панели управления
  • обучающие интерфейсы (guided UI)
  • сложные таблицы с пояснениями
  • визуализация данных

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

Оглавление