Стилизация стрелки

В Tippy.js стрелка (arrow) является отдельным элементом, который визуально указывает на целевой элемент, к которому привязан тултип. Работа с ней начинается с включения опции arrow при создании экземпляра Tippy:

tippy('#button', {
  content: 'Пример тултипа',
  arrow: true
});

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

Настройка размера и формы стрелки

Размер стрелки управляется через CSS переменные, встроенные в Tippy.js. Основные параметры:

  • --tippy-arrow-size — задаёт размер стрелки (ширина и высота).
  • --tippy-arrow-transform — позволяет вращать или смещать стрелку.

Пример увеличения стрелки до 16px:

.tippy-box[data-theme~='custom'] .tippy-arrow {
  --tippy-arrow-size: 16px;
}

Форма стрелки можно изменить с помощью clip-path или SVG. Tippy.js поддерживает кастомные стрелки через элемент arrow:

tippy('#button', {
  content: 'Кастомная стрелка',
  arrow: '<svg width="20" height="10"><polygon points="0,0 20,0 10,10" /></svg>',
  theme: 'custom'
});

Стилизация цвета и границ

Цвет стрелки синхронизируется с фоном тултипа, что обеспечивает единый визуальный стиль. Для изменения цвета стрелки нужно использовать селектор .tippy-arrow или назначить кастомную тему:

.tippy-box[data-theme~='custom'] {
  background-color: #3498db;
}

.tippy-box[data-theme~='custom'] .tippy-arrow {
  color: #3498db;
}

Если требуется отдельный цвет для стрелки, можно использовать свойство border-color для треугольной формы:

.tippy-box[data-theme~='custom'] .tippy-arrow::before {
  border-top-color: red; /* стрелка направлена вниз */
}

Позиционирование стрелки

Tippy.js автоматически размещает стрелку с помощью Popper.js, однако можно вручную сдвигать её через опцию arrow и модификаторы Popper:

tippy('#button', {
  content: 'Сдвинутая стрелка',
  arrow: true,
  popperOptions: {
    modifiers: [
      {
        name: 'offset',
        options: {
          offset: [0, 10] // смещение тултипа и стрелки
        }
      }
    ]
  }
});

Используя CSS, также можно корректировать положение стрелки относительно тултипа:

.tippy-box[data-theme~='custom'] .tippy-arrow {
  top: -5px; /* сдвиг вверх */
  left: 50%; /* центрирование */
  transform: translateX(-50%);
}

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

Стрелку можно анимировать вместе с тултипом с помощью CSS-переходов:

.tippy-box[data-theme~='custom'] {
  transition: transform 0.3s ease;
}

.tippy-box[data-theme~='custom'] .tippy-arrow {
  transition: transform 0.3s ease, color 0.3s ease;
}

Также возможны эффекты появления стрелки отдельно через ключевые кадры:

@keyframes arrow-appear {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

.tippy-box[data-theme~='custom'] .tippy-arrow {
  animation: arrow-appear 0.2s forwards;
}

Кастомизация с помощью тем

Tippy.js поддерживает темы (theme), которые позволяют централизованно управлять цветом, размером и формой стрелки. Пример создания темы с уникальной стрелкой:

tippy('#button', {
  content: 'Тема с кастомной стрелкой',
  theme: 'custom',
  arrow: true
});
.tippy-box[data-theme~='custom'] {
  background-color: #2ecc71;
}

.tippy-box[data-theme~='custom'] .tippy-arrow {
  --tippy-arrow-size: 20px;
  color: #2ecc71;
  border-radius: 2px;
}

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

Советы по адаптивности

  • Стрелка автоматически корректируется при смене позиции тултипа (placement), но можно управлять этим вручную через popperOptions.
  • Для динамических элементов с изменяющимся размером стоит использовать update() у Tippy.js, чтобы стрелка оставалась правильно позиционированной:
const tip = tippy('#button', { content: 'Динамическая стрелка', arrow: true });
tip[0].setContent('Новый контент');
tip[0].popperInstance.update();
  • Для высококонтрастных интерфейсов рекомендуется использовать отдельный цвет стрелки, чтобы визуально отличать её от фона тултипа.

Итоговые возможности

Стилизация стрелки в Tippy.js включает:

  • Настройку размера через --tippy-arrow-size.
  • Изменение формы и использование SVG.
  • Управление цветом и границами через CSS и темы.
  • Сдвиг и позиционирование с помощью Popper.js и CSS.
  • Анимацию появления стрелки.
  • Централизованное оформление через темы для нескольких тултипов.

Это обеспечивает полную гибкость визуального оформления стрелки без необходимости модифицировать внутреннюю структуру Tippy.js.

Оглавление