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

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

Настройка позиции через side

Свойство side отвечает за расположение подсказки относительно целевого элемента. Доступные значения:

  • top — над элементом
  • right — справа от элемента
  • bottom — под элементом
  • left — слева от элемента

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

$('#username').tooltipster({
    content: 'Введите ваш логин',
    side: 'right'
});

В этом примере подсказка отображается справа от поля ввода с идентификатором username.

Тонкая настройка смещения с distance и offset

  • distance — определяет расстояние между тултипом и целевым элементом. Значение указывается в пикселях.
$('#password').tooltipster({
    content: 'Пароль должен содержать минимум 8 символов',
    side: 'bottom',
    distance: 12
});
  • offset — позволяет смещать тултип вдоль оси элемента. Используется для точной подгонки при нестандартных формах или компоновках.
$('#email').tooltipster({
    content: 'Введите корректный email',
    side: 'top',
    offset: [0, 20]  // [горизонтальное смещение, вертикальное смещение]
});

Автоматическое позиционирование с functionPosition

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

$('#phone').tooltipster({
    content: 'Формат: +7 (XXX) XXX-XX-XX',
    functionPosition: function(instance, helper, position){
        // Смещаем подсказку на 15px вниз, если поле близко к верхней границе окна
        if(position.coord.top < 50){
            position.coord.top += 15;
        }
        return position;
    }
});

Функция получает:

  • instance — объект Tooltipster
  • helper — вспомогательный объект с информацией о целевом элементе
  • position — исходные координаты и размеры подсказки

Возвращаемый объект должен содержать поля coord и size, которые определяют точное размещение.

Ограничение выхода за пределы окна с repositionOnScroll и viewportAware

  • repositionOnScroll — при прокрутке страницы тултип автоматически переставляется, чтобы оставаться видимым:
$('#dob').tooltipster({
    content: 'Введите дату рождения',
    side: 'bottom',
    repositionOnScroll: true
});
  • viewportAware — предотвращает выход тултипа за границы видимой области окна:
$('#address').tooltipster({
    content: 'Укажите полный адрес',
    side: 'left',
    viewportAware: true
});

Сочетание этих опций обеспечивает корректное позиционирование на любых разрешениях экрана и при прокрутке страницы.

Комбинация с CSS для точной подгонки

Tooltipster предоставляет классы для кастомизации, что полезно при работе с формами:

.tooltipster-custom {
    max-width: 250px;
    padding: 10px;
    font-size: 14px;
    border-radius: 6px;
    background-color: #333;
    color: #fff;
}
$('#city').tooltipster({
    content: 'Введите город проживания',
    side: 'top',
    theme: 'tooltipster-custom'
});

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

Применение к динамически создаваемым полям

Для элементов, добавляемых после загрузки страницы, используется делегирование:

$(document).on('mouseenter', '.dynamic-input', function(){
    $(this).tooltipster({
        content: 'Это динамически добавленное поле',
        side: 'bottom'
    });
});

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

Сценарии практического позиционирования

  1. Форма регистрации — подсказки сверху для заголовков полей, снизу для кнопок подтверждения.
  2. Многострочные поля — смещение вниз для сохранения видимости текста.
  3. Мобильные интерфейсы — использование viewportAware и небольших distance, чтобы тултипы не выходили за экран.

Эффективное использование параметров side, distance, offset, functionPosition и CSS-классов позволяет добиться полного контроля над положением подсказок относительно любых полей формы, сохраняя читаемость и эстетичность интерфейса.

Оглавление