Паузы при наведении

Библиотека iziToast предоставляет гибкий и удобный способ отображения уведомлений на веб-странице. Одним из важных аспектов пользовательского взаимодействия является контроль времени жизни уведомления. Иногда требуется, чтобы таймер скрытия уведомления останавливался при наведении курсора на него, а возобновлялся после ухода мыши. В iziToast это реализуется с помощью опции pauseOnHover.

Опция pauseOnHover

Свойство pauseOnHover позволяет приостановить автоматическое закрытие уведомления при наведении мыши.

Синтаксис:

iziToast.show({
    title: 'Информация',
    message: 'Это уведомление приостанавливает таймер при наведении',
    pauseOnHover: true,
    timeout: 5000
});
  • true — таймер будет останавливаться при наведении на уведомление.
  • false — таймер продолжает обратный отсчёт независимо от наведения.

По умолчанию значение pauseOnHover равно true, что делает поведение уведомлений более удобным для пользователей.

Принцип работы

Когда уведомление появляется на странице, запускается таймер, указанный в параметре timeout. Если pauseOnHover: true, механизм работает следующим образом:

  1. Таймер запускается сразу после отображения уведомления.

  2. При наведении курсора на уведомление:

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

  3. После ухода мыши таймер возобновляет обратный отсчёт с того момента, на котором был остановлен.

Это позволяет пользователю спокойно прочитать уведомление, не спеша, не теряя важную информацию.

Использование с различными типами уведомлений

iziToast поддерживает несколько типов уведомлений: success, error, info, warning. Все они одинаково реагируют на pauseOnHover.

Пример:

iziToast.success({
    title: 'Успех',
    message: 'Таймер приостановлен при наведении',
    pauseOnHover: true,
    timeout: 4000
});

iziToast.error({
    title: 'Ошибка',
    message: 'Проверка паузы при наведении',
    pauseOnHover: true,
    timeout: 6000
});

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

  1. timeout — длительность жизни уведомления. Если указано timeout: false, уведомление не закрывается автоматически, и пауза при наведении не имеет смысла.
  2. progressBar — визуальный индикатор обратного отсчёта. При pauseOnHover: true прогресс-бар также останавливается на время наведения.
iziToast.show({
    title: 'Информация',
    message: 'Прогресс-бар останавливается при наведении',
    timeout: 7000,
    pauseOnHover: true,
    progressBar: true
});

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

Если уведомления создаются динамически на основе событий пользователя, pauseOnHover особенно полезна:

document.getElementById('notifyBtn').addEventListener('click', function() {
    iziToast.show({
        title: 'Событие',
        message: 'Таймер остановлен, пока курсор над уведомлением',
        pauseOnHover: true,
        timeout: 5000
    });
});

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

Советы по использованию

  • Для критичных уведомлений рекомендуется pauseOnHover: true, чтобы пользователь не пропустил важную информацию.
  • Для уведомлений, которые появляются часто, можно оставить таймер без паузы (pauseOnHover: false), чтобы интерфейс не перегружался.
  • При использовании progressBar стоит учитывать, что при наведении он остановится, что даёт пользователю визуальное представление о времени до скрытия.

Заключение по функциональности

Опция pauseOnHover в iziToast обеспечивает интуитивное взаимодействие с уведомлениями, увеличивая удобство и предотвращая случайное скрытие информации. Она гибко комбинируется с другими параметрами, такими как timeout, progressBar и типы уведомлений, что делает библиотеку удобной для различных сценариев веб-разработки.

Оглавление