Стрелки и указатели

Tooltipster предоставляет гибкий механизм управления стрелками (pointers) для подсказок. По умолчанию каждая подсказка имеет стрелку, указывающую на элемент-триггер. Управление стрелкой осуществляется через опции при инициализации, а также через CSS для детальной кастомизации внешнего вида.

Включение и отключение стрелки

Для контроля отображения стрелки используется параметр arrow:

$('.tooltip').tooltipster({
    content: 'Пример подсказки',
    arrow: true // по умолчанию true
});
  • arrow: true — стрелка отображается.
  • arrow: false — стрелка отключена. Полезно, если требуется минималистичный дизайн подсказки.

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

Стрелка автоматически позиционируется в зависимости от положения подсказки относительно элемента-триггера. Можно указать предпочтительное расположение подсказки с помощью параметра side:

$('.tooltip').tooltipster({
    content: 'Подсказка справа',
    side: 'right'
});

Возможные значения side:

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

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

Пользовательский дизайн стрелки через CSS

Стрелка формируется с помощью CSS псевдоэлементов .tooltipster-arrow-border и .tooltipster-arrow. Для изменения цвета или формы стрелки применяются стандартные CSS-свойства:

.tooltipster-box .tooltipster-arrow {
    border-color: #3498db; /* цвет самой стрелки */
}

.tooltipster-box .tooltipster-arrow-border {
    border-color: #2980b9; /* цвет обводки стрелки */
}

.tooltipster-box .tooltipster-arrow,
.tooltipster-box .tooltipster-arrow-border {
    width: 12px;
    height: 12px;
}

Важно: изменение размеров стрелки может потребовать корректировки позиции подсказки, чтобы стрелка оставалась визуально совмещенной с элементом.

Смещение стрелки

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

$('.tooltip').tooltipster({
    content: 'Подсказка с нестандартной стрелкой',
    functionPosition: function(instance, helper, position){
        position.coord.left += 10; // смещение по X
        position.coord.top -= 5;   // смещение по Y
        return position;
    }
});
  • helper.geo содержит геометрию элемента-триггера.
  • position.coord определяет координаты подсказки на странице.

Анимация стрелки

Стрелка наследует анимацию всей подсказки, однако можно отдельно настроить вход и выход стрелки через CSS:

.tooltipster-box.tooltipster-fade {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.tooltipster-box .tooltipster-arrow {
    transition: border-color 0.4s ease, transform 0.4s ease;
}

Динамическая смена стрелки

В Tooltipster можно менять наличие стрелки после инициализации:

var tooltip = $('.tooltip').tooltipster().tooltipster('instance');

tooltip.option('arrow', false); // отключение стрелки
tooltip.option('arrow', true);  // включение стрелки

Также возможно менять цвет стрелки динамически через изменение CSS-классов:

$('.tooltipster-box').css('border-color', '#e74c3c');

Работа с нестандартными формами элементов

Если элемент-триггер имеет сложную форму или нестандартные границы, стрелка может отображаться некорректно. В таких случаях рекомендуется:

  1. Использовать functionPosition для точной подгонки координат стрелки.
  2. Увеличивать размер стрелки через CSS, чтобы она визуально попадала в центр элемента.
  3. Настраивать side с учётом реального доступного пространства на странице.

Интеграция с responsive-дизайном

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

$('.tooltip').tooltipster({
    content: 'Responsive стрелка',
    repositionOnScroll: true
});

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

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

  • Для большинства случаев достаточно включить стрелку через arrow: true и выбрать подходящий side.
  • Для точной подгонки стрелки использовать functionPosition.
  • Для кастомизации внешнего вида — модифицировать CSS .tooltipster-arrow и .tooltipster-arrow-border.
  • При сложной верстке и нестандартных элементах — комбинировать смещение стрелки и изменение размеров через CSS.

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

Оглавление