Автоматическое скрытие хинтов

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

Автоматическое скрытие хинта в Intro.js выполняется за счёт параметра hintTimeout. Этот параметр задаёт время в миллисекундах, через которое хинт исчезнет автоматически.

introJs().addHints();
introJs().setOptions({
    hintTimeout: 5000 // 5 секунд
});

В данном примере все хинты будут автоматически закрываться через 5 секунд после появления.

Настройка индивидуального времени скрытия для каждого хинта

По умолчанию hintTimeout применяется ко всем хинтам глобально. Для тонкой настройки можно управлять хинтами отдельно через объект data-hint. Однако для индивидуального времени скрытия требуется использование кастомного скрипта, так как Intro.js не поддерживает отдельные таймауты на уровне атрибутов HTML напрямую.

Пример индивидуального скрытия с помощью Jav * aScript:

document.querySelectorAll('.introjs-hint').forEach((hint, index) => {
    setTimeout(() => {
        hint.remove();
    }, (index + 1) * 3000); // для каждого хинта своё время
});

Здесь хинты исчезают последовательно: первый через 3 секунды, второй через 6 и так далее.

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

Intro.js позволяет автоматически закрывать хинты, если пользователь взаимодействует с подсвечиваемым элементом. Это настраивается через событие onHintClick:

introJs().onHintClick(function(element) {
    element.style.display = 'none'; // скрытие хинта при клике
});

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

Скрытие хинтов при переходе между шагами

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

introJs().onafterchange(function(targetElement) {
    document.querySelectorAll('.introjs-hint').forEach(hint => {
        if (!targetElement.contains(hint)) {
            hint.style.display = 'none';
        }
    });
});

Это предотвращает наложение старых хинтов на новые шаги и поддерживает чистоту интерфейса.

Комбинирование автоматического тайм-аута и пользовательского взаимодействия

Оптимальный подход заключается в сочетании hintTimeout и событий onHintClick или onafterchange. Это позволяет:

  • Скрывать хинты автоматически через заданное время.
  • Убирать подсказки при клике или смене контекста, что повышает гибкость управления интерфейсом.
  • Избегать «залипания» подсказок, особенно на динамически изменяющихся страницах.

Пример комбинированной реализации:

introJs().setOptions({ hintTimeout: 4000 }).addHints()
.onHintClick(element => {
    element.style.display = 'none';
})
.onafterchange(target => {
    document.querySelectorAll('.introjs-hint').forEach(hint => {
        if (!target.contains(hint)) hint.style.display = 'none';
    });
});

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

  1. Подбирайте разумное время для hintTimeout — слишком короткий период может не дать пользователю прочитать подсказку, слишком длинный — раздражать.
  2. Используйте события Intro.js для контроля взаимодействия с элементами. Это создаёт гибкую систему управления подсказками.
  3. Объединяйте глобальные и локальные методы: глобальный hintTimeout для базового контроля времени и локальные обработчики для динамичных интерфейсов.

Поддержка динамических страниц

На страницах с динамически подгружаемым контентом важно обновлять хинты после загрузки элементов:

introJs().addHints();
setTimeout(() => {
    introJs().refreshHints();
}, 1000); // обновление хинтов после загрузки DOM

Метод refreshHints() пересчитывает позицию хинтов, что гарантирует их корректное отображение перед автоматическим скрытием.

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

Оглавление