Кастомный контент в тултипах

Основы компонента Tooltip

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

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

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

Однако использование простого текста ограничивает возможности оформления и взаимодействия. Для создания кастомного контента необходимо использовать JSX внутри свойства title.

Использование JSX в title

Свойство title может принимать любой React-элемент. Это позволяет включать сложные структуры: заголовки, изображения, ссылки, списки и стилизованные блоки.

<Tooltip
  title={
    <div style={{ padding: '10px', maxWidth: '250px' }}>
      <h4>Подсказка с заголовком</h4>
      <p>Можно использовать текст, ссылки и даже изображения.</p>
      <a href="https://mui.com/">Документация MUI</a>
    </div>
  }
>
  <Button>Наведите на меня</Button>
</Tooltip>

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

  • Использование div или Box из MUI позволяет контролировать размеры, отступы и стили.
  • Необходимо учитывать ограничения по ширине и перенос текста для улучшения читаемости.

Стилизация тултипов через sx и classes

Для полного контроля внешнего вида можно применять системное свойство sx или создавать собственные классы через styled или makeStyles.

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

const CustomTooltip = styled(({ className, ...props }) => (
  <Tooltip {...props} classes={{ popper: className }} />
))({
  [`& .${tooltipClasses.tooltip}`]: {
    backgroundColor: '#333',
    color: '#fff',
    fontSize: '14px',
    borderRadius: '8px',
    padding: '12px',
    boxShadow: '0px 4px 10px rgba(0,0,0,0.2)',
  },
});

<CustomTooltip
  title={<span>Кастомная подсказка с уникальным стилем</span>}
>
  <Button>Наведите на меня</Button>
</CustomTooltip>

Особенности подхода:

  • tooltipClasses.tooltip позволяет стилизовать сам блок подсказки.
  • Через popper можно управлять поведением позиционирования тултипа.
  • Свойство Box или span внутри title позволяет добавлять интерактивные элементы без ограничения на текст.

Тултипы с интерактивным контентом

Иногда необходимо размещать внутри тултипа кнопки, формы или ссылки. Для этого MUI предоставляет свойство disableInteractive={false} (по умолчанию интерактивность отключена, чтобы избежать проблем с мышью).

<Tooltip
  title={
    <div>
      <p>Выберите действие:</p>
      <button onCl ick={() => alert('Клик!')}>Кликнуть</button>
    </div>
  }
  interactive
>
  <Button>Наведите на меня</Button>
</Tooltip>

Важные моменты:

  • Использование interactive предотвращает мгновенное скрытие тултипа при наведении на его содержимое.
  • Любой JSX внутри title может содержать обработчики событий, что расширяет возможности кастомизации.

Анимация и позиционирование

Tooltip поддерживает управление позиционированием через свойства placement и PopperProps. Например, для тултипа с анимацией появления можно использовать TransitionComponent.

import Fade from '@mui/material/Fade';

<Tooltip
  title={<span>Появление с плавной анимацией</span>}
  placement="right"
  TransitionComponent={Fade}
  TransitionProps={{ timeout: 600 }}
>
  <Button>Наведите на меня</Button>
</Tooltip>

Особенности:

  • placement принимает значения: top, bottom, left, right и их вариации (start, end).
  • Fade и Grow — встроенные компоненты для плавного появления и скрытия.
  • Свойство PopperProps позволяет точно настраивать смещение и ограничения, что критично при сложных интерфейсах.

Рекомендации по организации контента

  • Использовать контейнеры MUI: Box, Stack и Typography упрощают управление размерами и текстовыми стилями.
  • Минимизировать сложность: слишком большие тултипы ухудшают UX и могут перекрывать другие элементы.
  • Поддерживать интерактивность при необходимости: кнопки, ссылки и чекбоксы должны быть доступны, но не ломать позиционирование.
  • Обеспечивать контраст и читаемость: фон, тени и отступы улучшают восприятие содержимого.

Пример комплексного кастомного тултипа

<Tooltip
  interactive
  placement="bottom-start"
  title={
    <Box sx={{ p: 2, maxWidth: 300, backgroundColor: '#1976d2', color: '#fff', borderRadius: 2 }}>
      <Typography variant="h6">Интерактивный тултип</Typography>
      <Typography variant="body2" sx={{ mb: 1 }}>
        Этот тултип содержит ссылки и кнопки.
      </Typography>
      <Stack direction="row" spacing={1}>
        <Button variant="contained" color="secondary" size="small">Принять</Button>
        <Button variant="outlined" color="inherit" size="small">Отмена</Button>
      </Stack>
    </Box>
  }
>
  <Button>Наведите на меня</Button>
</Tooltip>

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

Оглавление