Сохранение открытого состояния

Для того чтобы тултип оставался открытым после взаимодействия пользователя с элементом, необходимо использовать сочетание нескольких настроек Tooltipster. Основной параметр, влияющий на поведение, — это trigger. По умолчанию тултипы открываются на события hover или click. Чтобы контролировать состояние, используется trigger: 'custom'.

$('#myElement').tooltipster({
    content: 'Информация сохраняется',
    trigger: 'custom',
    interactive: true
});

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

Методы управления состоянием тултипа

Tooltipster предоставляет несколько методов, позволяющих программно открывать, закрывать или проверять состояние тултипа:

  • open() – открывает тултип
  • close() – закрывает тултип
  • content() – изменяет содержимое тултипа
  • status() – возвращает текущее состояние тултипа (open или closed)

Пример использования методов для сохранения состояния:

const instance = $('#myElement').tooltipster('instance');

// Открываем тултип при событии click
$('#myElement').on('click', function() {
    if (instance.status().open) {
        instance.close();
    } else {
        instance.open();
    }
});

Использование instance.status().open позволяет динамически проверять текущее состояние и предотвращать автоматическое закрытие.

Автоматическое закрытие при определённых условиях

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

$('#myElement').on('mouseleave', function() {
    setTimeout(function() {
        if (!$('#myElement').is(':hover') && !$('.tooltipster-base').is(':hover')) {
            instance.close();
        }
    }, 300);
});

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

Сохранение состояния между взаимодействиями

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

let tooltipState = false;

$('#myElement').tooltipster({
    content: 'Сохраняем состояние',
    trigger: 'custom',
    interactive: true,
    functionReady: function(instance, helper) {
        if (tooltipState) {
            instance.open();
        }
    }
});

$('#toggleTooltip').on('click', function() {
    const instance = $('#myElement').tooltipster('instance');
    tooltipState = !tooltipState;
    tooltipState ? instance.open() : instance.close();
});

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

Настройка поведения при обновлении содержимого

Если содержимое тултипа обновляется динамически, необходимо убедиться, что состояние сохраняется:

const instance = $('#myElement').tooltipster('instance');

function updateTooltipContent(newContent) {
    const wasOpen = instance.status().open;
    instance.content(newContent);
    if (wasOpen) {
        instance.open();
    }
}

Этот приём предотвращает закрытие тултипа при обновлении и позволяет пользователю продолжать взаимодействие с новым контентом.

Использование дополнительных опций для контроля состояния

  • delay – задержка перед закрытием тултипа, полезна при навигации мышью
  • animationDuration – длительность анимации открытия/закрытия, чтобы изменение состояния было плавным
  • multiple – позволяет одновременно открывать несколько тултипов, если интерфейс требует этого

Пример с дополнительными опциями:

$('#myElement').tooltipster({
    content: 'Тултип с задержкой',
    trigger: 'custom',
    interactive: true,
    delay: 200,
    animationDuration: 300,
    multiple: true
});

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

Оглавление