Tooltip

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

import { Tooltip, Button } from 'antd';

<Tooltip title="Подсказка">
  <Button>Наведи на меня</Button>
</Tooltip>

В этом примере title задаёт текст подсказки, а компонент Button является целевым элементом, при наведении на который появляется Tooltip.

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

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

  • top
  • left
  • right
  • bottom
  • topLeft
  • topRight
  • bottomLeft
  • bottomRight
  • leftTop
  • leftBottom
  • rightTop
  • rightBottom

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

<Tooltip title="Слева" placement="left">
  <Button>Левая подсказка</Button>
</Tooltip>

<Tooltip title="Сверху справа" placement="topRight">
  <Button>Подсказка сверху справа</Button>
</Tooltip>

Ключевой момент: свойство placement позволяет гибко управлять расположением подсказки относительно целевого элемента.

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

В Ant Design видимость подсказки можно контролировать с помощью свойства visible или событий onVisibleChange. Это полезно для реализации сложной логики отображения подсказок.

import { useState } from 'react';
import { Tooltip, Button } from 'antd';

const ControlledTooltip = () => {
  const [visible, setVisible] = useState(false);

  return (
    <Tooltip
      title="Контролируемая подсказка"
      visible={visible}
      onVisibleCha nge={(v) => setVisible(v)}
    >
      <Button onCl ick={() => setVisible(!visible)}>Переключить</Button>
    </Tooltip>
  );
};

Важно: visible принимает булево значение, а onVisibleChange позволяет синхронизировать состояние компонента с внешним состоянием.

Задержка отображения и скрытия

Свойства mouseEnterDelay и mouseLeaveDelay позволяют задать задержку появления и скрытия Tooltip:

<Tooltip title="Подсказка с задержкой" mouseEnterDelay={0.5} mouseLeaveDelay={0.2}>
  <Button>Наведи с задержкой</Button>
</Tooltip>
  • mouseEnterDelay — время в секундах перед появлением подсказки.
  • mouseLeaveDelay — время перед скрытием подсказки после ухода мыши.

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

Tooltip можно кастомизировать через свойство color и дополнительные классы:

<Tooltip title="Цветная подсказка" color="magenta">
  <Button>Цветная подсказка</Button>
</Tooltip>

<Tooltip title="С пользовательским стилем" overlayClassName="custom-tooltip">
  <Button>Свой стиль</Button>
</Tooltip>
.custom-tooltip {
  background-color: #001529;
  color: #fff;
  font-weight: bold;
}

Совет: overlayClassName даёт полный контроль над CSS-стилями подсказки, включая шрифты, отступы и цвета.

Подсказки с интерактивным контентом

Tooltip может содержать не только текст, но и React-компоненты, ссылки или кнопки, если задать title как JSX:

<Tooltip
  title={
    <div>
      <p>Дополнительная информация</p>
      <a href="https://ant.design" target="_blank">Перейти на сайт</a>
    </div>
  }
>
  <Button>Сложный контент</Button>
</Tooltip>

Ключевой момент: для сложного содержимого рекомендуется использовать JSX, чтобы поддерживать структуру и стили.

Всплывающие подсказки для элементов с disabled

Обычный Tooltip не появляется на disabled кнопках из-за особенностей DOM. Решение — обернуть кнопку в span:

<Tooltip title="Невозможность нажатия">
  <span>
    <Button disabled>Нажать нельзя</Button>
  </span>
</Tooltip>

Это сохраняет поведение подсказки, даже если элемент недоступен.

Анимации и переходы

Tooltip поддерживает кастомизацию анимации через motion и openAnimation. Для простого использования можно полагаться на встроенные анимации Ant Design, которые плавно показывают и скрывают подсказку.

<Tooltip title="Анимация по умолчанию">
  <Button>Наведи</Button>
</Tooltip>

Для расширенной кастомизации можно подключить библиотеку rc-tooltip напрямую, но в большинстве случаев встроенных возможностей достаточно.

Интеграция с другими компонентами

Tooltip отлично сочетается с компонентами Button, Icon, Input и любыми интерактивными элементами. Важно контролировать контейнер и z-index, чтобы подсказка не перекрывалась другими элементами интерфейса.

<Tooltip title="Информация об иконке">
  <i className="icon-info" />
</Tooltip>

Использование Tooltip с формами позволяет предоставлять подсказки по заполнению полей, улучшая UX.

Практические советы

  • Использовать краткие и информативные подсказки, чтобы не перегружать пользователя.
  • Для интерактивного содержимого использовать JSX внутри title.
  • Оборачивать disabled элементы в span, чтобы Tooltip работал корректно.
  • Контролировать позиции через placement, особенно в сложных макетах.
  • Настраивать задержку появления/скрытия для улучшения UX при быстром движении курсора.
Оглавление