Tooltip

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

Импорт и базовая структура

Для использования Tooltip необходимо импортировать компонент из библиотеки:

import { Tooltip, Button } from "@chakra-ui/react";

Базовый пример:

<Tooltip label="Это подсказка">
  <Button>Наведи на меня</Button>
</Tooltip>

В этом примере label задаёт текст подсказки, а компонент-деталь (Button) оборачивается Tooltip, делая его интерактивным. Tooltip автоматически появляется при наведении мышью и скрывается при уходе курсора.

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

Позиция подсказки управляется с помощью свойства placement. Chakra UI поддерживает следующие значения:

  • top
  • bottom
  • left
  • right
  • top-start
  • top-end
  • bottom-start
  • bottom-end
  • left-start
  • left-end
  • right-start
  • right-end

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

<Tooltip label="Подсказка сверху" placement="top">
  <Button>Наведи на меня</Button>
</Tooltip>

По умолчанию Tooltip позиционируется сверху (top), но комбинации с -start и -end позволяют точно контролировать смещение подсказки относительно целевого элемента.

Управление задержкой

Свойства openDelay и closeDelay задают задержку появления и скрытия подсказки в миллисекундах:

<Tooltip label="Подсказка с задержкой" openDelay={500} closeDelay={200}>
  <Button>Наведи на меня</Button>
</Tooltip>
  • openDelay={500} – подсказка появится через 500 мс после наведения.
  • closeDelay={200} – подсказка исчезнет через 200 мс после ухода курсора.

Стилизация Tooltip

Chakra UI позволяет гибко настраивать внешний вид через пропсы и тему:

  • bg – цвет фона подсказки
  • color – цвет текста
  • fontSize – размер шрифта
  • borderRadius – скругление углов

Пример:

<Tooltip 
  label="Стилизованная подсказка" 
  bg="blue.500" 
  color="white" 
  fontSize="md" 
  borderRadius="md"
>
  <Button>Наведи на меня</Button>
</Tooltip>

Можно использовать и динамические значения из темы Chakra UI, что позволяет легко поддерживать единый стиль приложения.

Интерактивные подсказки

С помощью свойства hasArrow можно добавить стрелку, указывающую на элемент:

<Tooltip label="С подсказкой со стрелкой" hasArrow>
  <Button>Наведи на меня</Button>
</Tooltip>

Для более сложных интерактивных подсказок используется isInteractive, позволяющий взаимодействовать с контентом подсказки (например, клики по ссылкам или кнопкам внутри Tooltip):

<Tooltip label={<Button>Нажми меня</Button>} isInteractive>
  <Button>Наведи на меня</Button>
</Tooltip>

Управление видимостью через состояние

Tooltip может контролироваться программно через свойства isOpen, onOpen и onClose. Это удобно для интеграции с пользовательскими событиями или анимацией:

const [isOpen, setIsOpen] = React.useState(false);

<Tooltip 
  label="Контролируемая подсказка" 
  isOpen={isOpen} 
  onO pen={() => setIsOpen(true)} 
  onCl ose={() => setIsOpen(false)}
>
  <Button onCl ick={() => setIsOpen(!isOpen)}>Нажми меня</Button>
</Tooltip>

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

Адаптивность и мобильные устройства

На мобильных устройствах hover отсутствует, поэтому Chakra UI автоматически обрабатывает клики для открытия Tooltip. Свойство closeOnClick позволяет закрывать подсказку при нажатии на целевой элемент или на любом месте экрана:

<Tooltip label="Подсказка на мобильных" closeOnClick={true}>
  <Button>Нажми меня</Button>
</Tooltip>

Анимация появления и скрытия

По умолчанию Tooltip использует плавную анимацию с помощью Framer Motion, встроенной в Chakra UI. Можно управлять стилями через transition или использовать кастомные анимации в теме. Для сложных эффектов можно комбинировать Tooltip с Motion компонентами.

Комбинация с другими компонентами Chakra UI

Tooltip отлично интегрируется с любыми интерактивными элементами:

  • IconButton:
<Tooltip label="Иконка кнопки">
  <IconButton icon={<SearchIcon />} aria-label="Search" />
</Tooltip>
  • Link:
<Tooltip label="Ссылка">
  <Link href="#">Перейти</Link>
</Tooltip>
  • Box или Text:
<Tooltip label="Простой текст">
  <Text>Наведи на текст</Text>
</Tooltip>

Доступность (Accessibility)

Chakra UI автоматически добавляет необходимые ARIA атрибуты для Tooltip. Свойство label используется как aria-label, обеспечивая поддержку скринридеров. Дополнительно можно использовать aria-label напрямую для кастомного текста.

Tooltip в Chakra UI — это универсальный инструмент для улучшения интерфейса: от простых подсказок до интерактивных элементов с контролируемым поведением, полной стилизацией и поддержкой доступности.

Оглавление