Позиционирование тултипов

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

Свойство placement

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

  • top — над элементом
  • bottom — под элементом
  • left — слева от элемента
  • right — справа от элемента
  • top-start, top-end — над элементом с выравниванием слева или справа
  • bottom-start, bottom-end — под элементом с выравниванием
  • left-start, left-end, right-start, right-end — соответствующие выравнивания по вертикали

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

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

Автоматическое смещение тултипа

Для предотвращения выхода подсказки за пределы окна браузера используется механизм автопозиционирования. В MUI он реализован через проп PopperProps, который позволяет передавать настройки компоненту Popper.js, отвечающему за позиционирование.

Пример смещения:

<Tooltip
  title="Удалить элемент"
  PopperProps={{
    modifiers: [
      {
        name: 'offset',
        options: {
          offset: [0, 10], // смещение по горизонтали и вертикали
        },
      },
      {
        name: 'preventOverflow',
        options: {
          padding: 8, // минимальное расстояние от края окна
        },
      },
    ],
  }}
>
  <IconButton>
    <DeleteIcon />
  </IconButton>
</Tooltip>

Ключевые моменты:

  • offset задает точное смещение тултипа относительно целевого элемента.
  • preventOverflow гарантирует, что подсказка не выйдет за видимую область.

Адаптивное позиционирование

Компонент Tooltip может динамически менять свое расположение, если выбранная позиция приводит к выходу за пределы окна. Для этого используется опция disableInteractive={false} и PopperProps с модификатором flip:

<Tooltip
  title="Редактировать"
  PopperProps={{
    modifiers: [
      { name: 'flip', options: { fallbackPlacements: ['top', 'bottom', 'left', 'right'] } },
    ],
  }}
>
  <IconButton>
    <EditIcon />
  </IconButton>
</Tooltip>

Это позволяет тултипу “переворачиваться” и оставаться видимым при ограниченном пространстве.

Управление точкой привязки (anchorEl)

Для более сложных сценариев можно использовать контролируемое позиционирование через проп PopperProps и anchorEl, чтобы тултип привязывался к произвольному элементу DOM, а не только к дочернему компоненту:

const [anchorEl, setAnchorEl] = React.useState(null);

<Button
  onMouseEn ter={(e) => setAnchorEl(e.currentTarget)}
  onMouseLe ave={() => setAnchorEl(null)}
>
  Настроить
</Button>

<Tooltip
  title="Настройки приложения"
  open={Boolean(anchorEl)}
  PopperProps={{ anchorEl }}
>
  <span />
</Tooltip>

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

Анимации и задержки появления

Для улучшения UX важно правильно настроить время появления и скрытия тултипа, так как резкое появление может отвлекать пользователя. MUI предоставляет пропы enterDelay и leaveDelay:

<Tooltip
  title="Информация о профиле"
  placement="right"
  enterDelay={500}  // задержка перед показом (мс)
  leaveDelay={200}  // задержка перед скрытием (мс)
>
  <Avatar src="/user.jpg" />
</Tooltip>

Использование этих настроек в сочетании с позиционированием позволяет сделать подсказки максимально удобными и неперегруженными.

Вывод

Позиционирование тултипов в MUI строится на комбинации пропов placement, PopperProps, смещений, контроля переполнения и анимации. Освоение этих инструментов позволяет создавать интерфейсы с аккуратным и предсказуемым поведением всплывающих подсказок.

Хотите, я могу подготовить подробную схему всех возможных вариантов позиционирования с визуальной диаграммой, чтобы сразу видеть, как работают start, end и flip?

Оглавление