Динамические сообщения об ошибках

Tooltipster — это мощная библиотека для создания всплывающих подсказок в JavaScript, которая позволяет управлять содержимым и поведением тултипов в реальном времени. Динамические сообщения об ошибках особенно актуальны при валидации форм, интерактивных элементах интерфейса и отображении состояния пользователя.

Ключевые возможности для динамических сообщений:

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

Инициализация Tooltipster для динамических сообщений

Для динамических сообщений важно использовать конфигурацию, которая допускает обновление содержимого:

$('.input-error').tooltipster({
    theme: 'tooltipster-light',
    trigger: 'custom',
    onlyOne: false,
    interactive: true,
    animation: 'fade',
    delay: 100
});

Пояснения к настройкам:

trigger: 'custom' — отключает стандартные события, позволяя полностью контролировать показ и скрытие тултипов.
interactive: true — делает тултип интерактивным, что важно для ошибок с кнопками или ссылками.
onlyOne: false — разрешает одновременное отображение нескольких тултипов.
animation и delay — настраивают визуальные эффекты появления.

Обновление содержимого тултипа

Tooltipster предоставляет метод .content() для динамического изменения текста:

$('.input-error').tooltipster('content', 'Поле не может быть пустым');

Для более сложных случаев допустимо передавать HTML-контент:

$('.input-error').tooltipster('content', $('<span class="error-highlight">Неверный формат email</span>'));

Управление отображением ошибок

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

$('input').on('input', function() {
    let value = $(this).val();
    if (value === '') {
        $(this).tooltipster('content', 'Поле обязательно для заполнения').tooltipster('open');
    } else if (!/^[\w.-]+@[\w.-]+\.\w{2,4}$/.test(value)) {
        $(this).tooltipster('content', 'Неверный формат email').tooltipster('open');
    } else {
        $(this).tooltipster('close');
    }
});

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

Подсказка открывается только при наличии ошибки.
Содержимое меняется без пересоздания тултипа.
Закрытие происходит автоматически при корректном вводе.

Асинхронные ошибки

Для работы с серверной валидацией можно использовать промисы или AJAX-запросы:

$('#username').on('blur', function() {
    let input = $(this);
    $.ajax({
        url: '/validate-username',
        method: 'POST',
        data: { username: input.val() }
    }).done(function(response) {
        if (!response.valid) {
            input.tooltipster('content', response.message).tooltipster('open');
        } else {
            input.tooltipster('close');
        }
    });
});

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

Динамическая реакция на серверные проверки.
Возможность комбинировать клиентскую и серверную валидацию.
Минимизация повторного создания тултипов.

Пользовательские события и методы

Tooltipster предоставляет методы для полного контроля:

.open() и .close() — ручное открытие и закрытие тултипа.
.destroy() — удаление тултипа при необходимости.
.reposition() — корректировка позиции после изменения содержимого или интерфейса.

Пример комплексного управления:

let $input = $('#password');

$input.tooltipster({
    trigger: 'custom',
    interactive: true
});

$input.on('keyup', function() {
    let val = $(this).val();
    if (val.length < 8) {
        $input.tooltipster('content', 'Пароль должен содержать минимум 8 символов').tooltipster('open');
    } else {
        $input.tooltipster('close');
    }
});