Тултипы для полей ввода

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

$('#input-field').tooltipster({
    content: 'Введите корректный email',
    theme: 'tooltipster-light',
    trigger: 'custom',
    triggerOpen: {
        mouseenter: true
    },
    triggerClose: {
        mouseleave: true
    },
    side: 'right',
    animation: 'fade',
    delay: 200
});
  • content — текст или HTML-содержимое тултипа. Может быть строкой, jQuery-объектом или функцией для динамического контента.
  • theme — определяет визуальный стиль тултипа. Tooltipster поставляется с набором встроенных тем, которые можно модифицировать через CSS.
  • trigger — тип события, запускающего отображение тултипа. Для полей ввода часто используют custom, чтобы контролировать открытие через события focus и blur.
  • side — сторона, на которой тултип появится относительно поля (top, right, bottom, left).
  • animation и delay — задают визуальные эффекты появления и задержку перед показом.

Динамические подсказки для форм

Для полей ввода часто требуется отображать подсказки в зависимости от состояния поля. Tooltipster поддерживает динамический контент через функцию в опции content.

$('#username').tooltipster({
    content: $('<span>Минимум 6 символов</span>'),
    trigger: 'custom'
});

$('#username').on('input', function() {
    var val = $(this).val();
    if(val.length < 6) {
        $(this).tooltipster('content', 'Минимум 6 символов').tooltipster('open');
    } else {
        $(this).tooltipster('close');
    }
});

В данном примере тултип открывается только при несоответствии условиям и автоматически скрывается при корректном вводе. Это позволяет использовать Tooltipster для валидации форм в реальном времени без лишнего визуального шума.

Интеграция с валидацией форм

Tooltipster часто используется совместно с библиотеками валидации форм, такими как jQuery Validation. С помощью метода updateContent можно обновлять текст тултипа при ошибках.

$('#myForm').validate({
    errorPlacement: function(error, element) {
        $(element).tooltipster('content', $(error).text()).tooltipster('open');
    },
    success: function(label, element) {
        $(element).tooltipster('close');
    }
});
  • errorPlacement — позволяет определить, где отображать сообщение об ошибке. Tooltipster здесь выступает как внешний контейнер.
  • success — событие при успешной проверке поля, используемое для скрытия тултипа.

Настройка взаимодействия с пользователем

Для полей ввода важен контроль за открытием и закрытием тултипов. Tooltipster позволяет комбинировать события focus, blur, mouseenter и mouseleave:

$('#email').tooltipster({
    trigger: 'custom',
    triggerOpen: {
        focus: true
    },
    triggerClose: {
        blur: true
    },
    interactive: true
});
  • interactive — делает тултип интерактивным, позволяя пользователю кликать по ссылкам или кнопкам внутри подсказки.
  • Разделение triggerOpen и triggerClose позволяет точнее контролировать поведение тултипа при работе с формами.

Использование HTML-контента и кастомных стилей

Tooltipster поддерживает HTML внутри тултипа, что удобно для оформления подсказок с подсветкой ошибок, ссылками на справку или списками инструкций.

$('#password').tooltipster({
    content: $('<div><strong>Пароль должен содержать:</strong><ul><li>8+ символов</li><li>Цифры и буквы</li></ul></div>'),
    theme: 'tooltipster-noir',
    interactive: true
});
  • Использование HTML позволяет внедрять сложные визуальные элементы, не ограничиваясь простым текстом.
  • Для кастомного оформления можно создавать свои CSS-классы и подключать их через параметр theme.

Позиционирование и адаптивность

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

$('#phone').tooltipster({
    side: 'right',
    distance: 10,
    maxWidth: 250,
    functionPosition: function(instance, helper, position){
        if($(window).width() < 500) {
            position.side = 'bottom';
        }
        return position;
    }
});
  • distance — расстояние между полем ввода и тултипом.
  • maxWidth — ограничивает ширину тултипа для мобильных устройств.
  • functionPosition — позволяет динамически менять положение в зависимости от ширины экрана или других условий.

Поддержка событий тултипа

Tooltipster предоставляет события для тонкой настройки поведения:

  • show — перед открытием тултипа.
  • shown — после того, как тултип отобразился.
  • hide — перед закрытием тултипа.
  • hidden — после скрытия.

Пример использования:

$('#age').on('shown.tooltipster', function() {
    console.log('Тултип открыт для поля возраст');
});

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

Итоговые рекомендации

  • Для форм лучше использовать trigger: 'custom' с focus/blur для точного контроля.
  • Динамический контент через content или метод updateContent обеспечивает актуальность подсказок.
  • HTML-контент и интерактивность делают тултипы удобными для сложных инструкций.
  • Настройка позиции через side, distance и functionPosition улучшает адаптивность.
  • Интеграция с системами валидации позволяет использовать тултипы для отображения ошибок без дублирования UI-элементов.

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

Оглавление