Валидация и подсказки

Для начала работы с Tooltipster необходимо подключить библиотеку и её стили. Обычно это делается через <link> и <script> в HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tooltipster@4.2.8/dist/css/tooltipster.bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tooltipster@4.2.8/dist/js/tooltipster.bundle.min.js"></script>

Инициализация происходит через метод .tooltipster() для выбранных элементов:

$('.tooltip').tooltipster({
    theme: 'tooltipster-light',
    animation: 'fade',
    delay: 200,
    trigger: 'hover'
});

Ключевые моменты при инициализации:

  • theme – визуальный стиль подсказки.
  • animation – способ появления подсказки (fade, grow, slide).
  • delay – задержка перед показом подсказки в миллисекундах.
  • trigger – событие, которое вызывает появление подсказки (hover, click, custom).

Использование Tooltipster для валидации форм

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

Пример базовой интеграции с jQuery Validation:

$('#myForm').validate({
    errorPlacement: function(error, element) {
        $(element).tooltipster({
            content: $(error),
            trigger: 'custom',
            onlyOne: true,
            position: 'right'
        }).tooltipster('show');
    },
    success: function(label, element) {
        $(element).tooltipster('hide');
    },
    rules: {
        username: {
            required: true,
            minlength: 3
        },
        email: {
            required: true,
            email: true
        }
    },
    messages: {
        username: {
            required: 'Введите имя пользователя',
            minlength: 'Имя слишком короткое'
        },
        email: {
            required: 'Введите email',
            email: 'Неверный формат email'
        }
    }
});

Особенности:

  • errorPlacement позволяет перенаправлять сообщения в Tooltipster вместо стандартного <label>.
  • success автоматически скрывает подсказку при исправлении ошибки.
  • position можно настроить для любого направления (top, bottom, left, right).

Настройка динамического содержимого подсказок

Tooltipster поддерживает динамическое обновление текста и HTML-контента. Это важно для валидации, когда сообщения могут изменяться.

$('#username').tooltipster({
    trigger: 'custom',
    contentAsHTML: true
});

function validateUsername() {
    let value = $('#username').val();
    if (value.length < 3) {
        $('#username').tooltipster('content', 'Имя слишком короткое').tooltipster('show');
    } else {
        $('#username').tooltipster('hide');
    }
}

$('#username').on('input', validateUsername);

Ключевые моменты:

  • contentAsHTML: true позволяет использовать HTML-теги в подсказках.
  • Метод tooltipster('content', newContent) обновляет текст подсказки без её повторной инициализации.
  • Можно вызывать show и hide вручную для тонкой настройки.

Различные триггеры для подсказок

Tooltipster поддерживает несколько способов активации подсказки:

  • hover – появляется при наведении мыши.
  • click – активируется по клику.
  • focus – полезно для форм, показывается при фокусе на поле.
  • custom – полный контроль через методы show и hide.

Пример с фокусом для поля формы:

$('#email').tooltipster({
    trigger: 'focus',
    side: 'right',
    theme: 'tooltipster-noir'
});

Продвинутые возможности: анимация и позиционирование

Tooltipster позволяет гибко управлять анимацией и расположением подсказок:

$('.tooltip').tooltipster({
    animation: 'grow',
    delay: 100,
    side: 'bottom',
    distance: 10,
    maxWidth: 250,
    interactive: true
});

Пояснения параметров:

  • distance – расстояние от целевого элемента.
  • maxWidth – максимальная ширина подсказки, чтобы текст не выходил за пределы.
  • interactive: true – позволяет размещать кнопки или ссылки внутри подсказки, оставляя её видимой при наведении на неё.

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

Tooltipster отлично подходит для отображения ошибок с сервера:

$('#username').on('blur', function() {
    let username = $(this).val();
    $.ajax({
        url: '/check-username',
        method: 'POST',
        data: { username },
        success: function(response) {
            if (!response.available) {
                $('#username').tooltipster('content', 'Имя уже занято').tooltipster('show');
            } else {
                $('#username').tooltipster('hide');
            }
        }
    });
});

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

  • Подсказка появляется только при получении ответа с ошибкой.
  • Позволяет объединять клиентскую и серверную валидацию.

Управление несколькими подсказками одновременно

При наличии нескольких полей формы важно не перегружать пользователя подсказками. Tooltipster поддерживает опцию onlyOne для отображения только одной подсказки на странице:

$('.tooltip').tooltipster({
    trigger: 'custom',
    onlyOne: true
});

Это предотвращает наложение нескольких сообщений и упрощает интерфейс при множественной валидации.

Стилизация подсказок

Tooltipster позволяет полностью контролировать внешний вид через CSS и встроенные темы:

.tooltipster-light {
    background: #f0f0f0;
    color: #333;
    border-radius: 6px;
    font-size: 14px;
    padding: 8px 12px;
}
.tooltipster-noir {
    background: #222;
    color: #fff;
    font-weight: bold;
}

Дополнительно можно использовать кастомные анимации через CSS или подключаемые темы из официального пакета.

Итоговая схема работы с Tooltipster и формами

  1. Подключение библиотеки и стилей.
  2. Инициализация Tooltipster для полей формы.
  3. Настройка триггеров (custom, focus) и позиционирования.
  4. Обработка ошибок валидации через errorPlacement или кастомные функции.
  5. Динамическое обновление содержимого подсказок при изменении данных.
  6. Поддержка асинхронных проверок и серверных ответов.
  7. Настройка анимации, ширины, интерактивности и темы подсказки.

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

Оглавление