Tooltip компонент

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

Подключение и базовое использование

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

import Tooltip from '@mui/material/Tooltip';
import Button from '@mui/material/Button';

Базовый синтаксис выглядит так:

<Tooltip title="Сохранить изменения">
  <Button>Сохранить</Button>
</Tooltip>

Объяснение ключевых свойств:

  • title — текст подсказки. Может быть строкой, React-элементом или компонентом.
  • children — элемент, к которому привязывается подсказка.
  • arrow — добавляет стрелку к подсказке, делая визуальную связь с целевым элементом.
  • placement — позиционирование подсказки относительно элемента. Возможные значения: top, bottom, left, right, а также их вариации start и end.
<Tooltip title="Информация о кнопке" placement="right" arrow>
  <Button>Инфо</Button>
</Tooltip>

Управление поведением подсказки

MUI позволяет настраивать время появления и скрытия подсказки через свойства enterDelay и leaveDelay:

<Tooltip title="Задержка показа" enterDelay={500} leaveDelay={200}>
  <Button>Наведи на меня</Button>
</Tooltip>
  • enterDelay — задержка перед появлением в миллисекундах.
  • leaveDelay — задержка перед скрытием подсказки в миллисекундах.

Для более точного контроля можно использовать свойство open, превращая Tooltip в полностью управляемый компонент:

const [open, setOpen] = React.useState(false);

<Tooltip title="Управляемая подсказка" open={open}>
  <Button
    onMouseEn ter={() => setOpen(true)}
    onMouseLe ave={() => setOpen(false)}
  >
    Наведи на меня
  </Button>
</Tooltip>

Кастомизация стиля

Стили Tooltip легко настраиваются через sx, styled или classes. Например, изменение фона и цвета текста:

<Tooltip
  title="Стилизация подсказки"
  sx={{
    '& .MuiTooltip-tooltip': {
      backgroundColor: '#1976d2',
      color: '#fff',
      fontSize: '14px',
      borderRadius: '8px',
    },
  }}
>
  <Button>Стилизация</Button>
</Tooltip>

Можно использовать styled для создания переиспользуемого компонента:

import { styled } from '@mui/material/styles';

const CustomTooltip = styled(({ className, ...props }) => (
  <Tooltip {...props} classes={{ popper: className }} />
))({
  [`& .MuiTooltip-tooltip`]: {
    backgroundColor: '#ff4081',
    fontSize: '13px',
    borderRadius: '6px',
  },
});

<CustomTooltip title="Кастомная подсказка">
  <Button>Кнопка</Button>
</CustomTooltip>

Использование с интерактивными элементами

Tooltip может содержать сложные React-элементы:

<Tooltip
  title={
    <React.Fragment>
      <div>Заголовок</div>
      <div>Дополнительная информация</div>
    </React.Fragment>
  }
>
  <Button>Интерактивный Tooltip</Button>
</Tooltip>

Позиционирование

MUI использует Popper.js для точного позиционирования. placement можно комбинировать с arrow для правильной ориентации стрелки. Также есть возможность использовать PopperProps для расширенной настройки поведения:

<Tooltip
  title="Пример с PopperProps"
  placement="bottom-start"
  PopperProps={{
    modifiers: [
      {
        name: 'offset',
        options: {
          offset: [0, 10],
        },
      },
    ],
  }}
>
  <Button>Сдвиг вниз</Button>
</Tooltip>

Tooltip для клавиатурной навигации и accessibility

  • Tooltip автоматически поддерживает aria-label для screen readers.
  • Использование enterTouchDelay помогает на мобильных устройствах, определяя задержку для тач-событий.
  • Tooltip появляется на фокусе через клавиатуру, обеспечивая доступность для пользователей без мыши.
<Tooltip title="Поддержка клавиатуры" enterTouchDelay={0}>
  <Button>Фокусируй меня</Button>
</Tooltip>

Лучшая практика

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

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

Оглавление