onHover

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

Синтаксис и подключение

onHover — это функция обратного вызова, которую можно задать при создании уведомления:

new Noty({
    text: 'Пример уведомления',
    type: 'alert',
    timeout: 5000,
    callbacks: {
        onHover: function() {
            console.log('Курсор наведен на уведомление');
        }
    }
}).show();
  • text — текст уведомления.
  • type — тип уведомления (alert, success, error, warning, info).
  • timeout — время автоматического закрытия уведомления в миллисекундах.
  • callbacks.onHover — функция, вызываемая при наведении курсора на уведомление.

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

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

let n = new Noty({
    text: 'Секундное уведомление',
    timeout: 5000,
    callbacks: {
        onHover: function() {
            n.stop(); // Останавливает таймер закрытия уведомления
        },
        onMouseLeave: function() {
            n.resume(); // Возобновляет таймер после ухода курсора
        }
    }
}).show();
  • stop() — приостанавливает таймер, уведомление остаётся на экране.
  • resume() — продолжает обратный отсчет до закрытия уведомления.

Использование для визуальных эффектов

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

new Noty({
    text: 'Наведи на меня!',
    type: 'info',
    callbacks: {
        onHover: function() {
            this.barDom.style.backgroundColor = '#ffcc00';
        },
        onMouseLeave: function() {
            this.barDom.style.backgroundColor = '';
        }
    }
}).show();
  • this.barDom — DOM-элемент уведомления, доступный внутри обратного вызова.
  • Возможны любые CSS-манипуляции: изменения цвета, шрифта, тени, анимаций.

Комплексные сценарии использования

onHover удобно сочетать с другими callback-функциями:

let counter = 0;

new Noty({
    text: 'Интерактивное уведомление',
    timeout: 7000,
    callbacks: {
        onHover: function() {
            counter++;
            this.setText(`Навели на уведомление ${counter} раз`);
        },
        onClose: function() {
            console.log('Уведомление закрыто');
        }
    }
}).show();
  • Функция setText() позволяет динамически изменять содержимое уведомления.
  • Поддержка сложной логики: подсчет событий, взаимодействие с другими элементами страницы, условное изменение стилей.

Особенности работы

  1. Момент вызова — onHover срабатывает при каждом наведении курсора, даже если он возвращается после ухода.
  2. Контекст this — внутри функции обратного вызова this ссылается на экземпляр уведомления Noty, что позволяет управлять состоянием и методами (close(), setText(), stop(), resume() и др.).
  3. Сочетание с CSS-анимациями — onHover можно использовать для запуска анимаций при наведении, например, увеличение масштаба или изменение прозрачности.

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

  • Использовать stop() при уведомлениях с коротким timeout, чтобы пользователь успевал прочитать сообщение.
  • Объединять с onMouseLeave для плавного восстановления исходного состояния уведомления.
  • Применять для интерактивных уведомлений, где пользователь может выполнять действия, например, клик по кнопкам внутри уведомления.
  • Минимизировать тяжёлые операции внутри onHover, чтобы не снижать производительность при частом наведении.

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

onHover работает со всеми типами уведомлений Noty (alert, success, error, warning, info). Для уведомлений с неограниченным временем жизни (timeout: false) этот callback полезен для запуска анимаций или взаимодействия с внешними элементами интерфейса.

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

Оглавление