Tooltip

import { Tooltip } from '@megafon/ui-core';

Примеры и код
Свойства и методы

Триггер-событияexport const triggerEvents: ISelectItem[] = [
    {
        value: TriggerEvent.CONTROLLED,
        title: TriggerEvent.CONTROLLED,
    },
    {
        value: TriggerEvent.HOVER,
        title: TriggerEvent.HOVER,
    },
    {
        value: TriggerEvent.CLICK,
        title: TriggerEvent.CLICK,
    },
];

Код DemoTooltipWithTriggerWrapperexport const DemoTooltipWithTriggerWrapper = ({ children }) => {
    const triggerElement = (React.useRef < HTMLElement) | (null > null);

    return children({ triggerElement });
};

Код DemoSelectTriggerWrapperexport const DemoSelectTriggerWrapper = ({ children }) => {
    const { value } = triggerEvents[0];
    const [currentValue, setCurrentValue] = React.useState<SelectItemValueType>(value);
    const handleSelect = (_e: React.SyntheticEvent<EventTarget>, data: ISelectItem<string>) => {
        setCurrentValue(data.value);
    };

    return children({
        onSelect: handleSelect,
        currentValue,
    });
};

Код DemoControlledTooltipWrapperexport const DemoControlledTooltipWrapper = ({ children, isOpen = false }) => {
    const [isOpened, setIsOpened] = React.useState < boolean > isOpen;

    const handleOpen = () => setIsOpened(true);
    const handleClose = () => setIsOpened(false);

    return children({
        isOpened,
        handleOpen,
        handleClose,
    });
};

Типы взаимодействия с триггер-элементом для показа тултипа

<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <span ref={triggerElement}>
              <Button fullWidth>Навести</Button>
          </span>
          <Tooltip triggerElement={triggerElement}>Эмуляция при наведении</Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>
<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <span ref={triggerElement}>
              <Button fullWidth>Кликнуть</Button>
          </span>
          <Tooltip triggerEvent="click" colorTheme="blue" triggerElement={triggerElement}>
              Эмуляция при клике
          </Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>

Позиционирование относительно триггер-элемента

<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <span ref={triggerElement}>
              <Button fullWidth>Сверху</Button>
          </span>
          <Tooltip triggerElement={triggerElement}>Положение сверху</Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>
<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <span ref={triggerElement}>
              <Button fullWidth>Справа</Button>
          </span>
          <Tooltip
              placement="right"
              text="text"
              buttonText="button"
              title="title"
              triggerElement={triggerElement}
          >
              Положение справа
          </Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>
<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <span ref={triggerElement}>
              <Button fullWidth>Слева</Button>
          </span>
          <Tooltip placement="left" triggerElement={triggerElement} text="text" buttonText="button" title="title">
              Положение слева
          </Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>
<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <span ref={triggerElement}>
              <Button fullWidth>Снизу</Button>
          </span>
          <Tooltip
              placement="bottom"
              triggerElement={triggerElement}
              text="text"
              buttonText="button"
              title="title"
          >
              Положение снизу
          </Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>

Перестроение относительно триггер-элемента

<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <span ref={triggerElement}>
              <Button fullWidth>Сверху</Button>
          </span>
          <Tooltip
              placement="top"
              triggerElement={triggerElement}
              isOpened={true}
              triggerEvent="controlled"
              fallbackPlacements={['bottom']}
          >
              Перестроение только вниз
          </Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>
<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <span ref={triggerElement}>
              <Button fullWidth>Сверху</Button>
          </span>
          <Tooltip triggerElement={triggerElement} isOpened={true} triggerEvent="controlled">
              Перестроение по умолчанию, во все стороны
          </Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>
<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <span ref={triggerElement}>
              <Button fullWidth>Сверху</Button>
          </span>
          <Tooltip
              placement="bottom"
              triggerElement={triggerElement}
              isOpened={true}
              triggerEvent="controlled"
              fallbackPlacements={['bottom']}
          >
              Перестроение не происходит при совпадении
              <br />
              расположения и заданного направления для перестроения
          </Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>

Смещение относительно триггер-элемента


<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <span ref={triggerElement}>
              <Button fullWidth>Триггер</Button>
          </span>
          <Tooltip triggerElement={triggerElement} triggerEvent="controlled" isOpened={true}>По умолчанию</Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>
<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <span ref={triggerElement}>
              <Button fullWidth>Триггер</Button>
          </span>
          <Tooltip triggerElement={triggerElement} triggerEvent="controlled" isOpened={true} offset="small">small</Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>

Перестроение при скролле

Расположение тултипа меняется при соприкосновении с границей контейнера.

<div style={demoWrapperWithScroll}>
  <div style={{ width: '1000px' }}>
      <DemoTooltipWithTriggerWrapper>
          {({ triggerElement }) => (
              <>
                  <div
                      ref={triggerElement}
                      style={{ marginTop: '70px', marginLeft: '50px', width: 'fit-content' }}
                  >
                      <Button>Длинная зеленая кнопка</Button>
                  </div>
                  <Tooltip
                      colorTheme="red"
                      triggerEvent="click"
                      triggerElement={triggerElement}
                      text="Горизонтальное перестроение"
                      placement="top-start"
                      fallbackPlacements={[]}
                  />
              </>
          )}
      </DemoTooltipWithTriggerWrapper>
  </div>
</div>
<div style={demoWrapperWithScroll}>
  <div style={{ height: '1000px' }}>
      <DemoTooltipWithTriggerWrapper>
          {({ triggerElement }) => (
              <>
                  <div ref={triggerElement} style={{ marginTop: '70px', width: 'fit-content' }}>
                      <Button sizeAll="large">Кнопка</Button>
                  </div>
                  <Tooltip
                      colorTheme="red"
                      triggerEvent="click"
                      triggerElement={triggerElement}
                      text="Вертикальное перестроение"
                      placement="right-end"
                      fallbackPlacements={[]}
                  >
                      Доп. текст
                  </Tooltip>
              </>
          )}
      </DemoTooltipWithTriggerWrapper>
  </div>
</div>
<div style={demoWrapperWithScrollBig}>
  <div style={{ width: '3000px', height: '3000px' }}>
      <DemoTooltipWithTriggerWrapper>
          {({ triggerElement }) => (
              <>
                  <span>
                      Проскрольте немного демо в нижний правый угол, чтобы нажать кнопку для показа тултипа
                  </span>
                  <div ref={triggerElement} style={demoButtonContainer}>
                      <Button sizeAll="large">Кнопка</Button>
                      Демонстрация перестроения тултипа по всем доступным положениям.
                  </div>
                  <Tooltip
                      colorTheme="red"
                      triggerEvent="click"
                      triggerElement={triggerElement}
                      text="Маленький тултип"
                      placement="top-start"
                      fallbackPlacements={[
                          'top-start',
                          'top',
                          'top-end',
                          'right-start',
                          'right',
                          'right-end',
                          'bottom-end',
                          'bottom',
                          'bottom-start',
                          'left-end',
                          'left',
                          'left-start',
                      ]}
                  >
                      Доп. текст
                  </Tooltip>
              </>
          )}
      </DemoTooltipWithTriggerWrapper>
  </div>
</div>

Варианты содержимого тултипа

<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <span ref={triggerElement}>
              <Button fullWidth>Все варианты</Button>
          </span>
          <Tooltip
              colorTheme="red"
              triggerEvent="click"
              triggerElement={triggerElement}
              title="Заголовок"
              text="Оказание услуг связи приостановлено. Пожалуйста, проверьте ваш баланс."
              hasCloseButton
              buttonText="Кнопка"
          >
              Дополнительное содержимое тултипа
          </Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>
<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <span ref={triggerElement}>
              <Button fullWidth>Только заголовок</Button>
          </span>
          <Tooltip colorTheme="red" triggerEvent="click" triggerElement={triggerElement} title="Заголовок" />
      </>
  )}
</DemoTooltipWithTriggerWrapper>
<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <span ref={triggerElement}>
              <Button fullWidth>Только текст</Button>
          </span>
          <Tooltip
              colorTheme="red"
              triggerEvent="click"
              triggerElement={triggerElement}
              text="Оказание услуг связи приостановлено. Пожалуйста, проверьте ваш баланс."
          />
      </>
  )}
</DemoTooltipWithTriggerWrapper>
<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <span ref={triggerElement}>
              <Button fullWidth>Только кнопка</Button>
          </span>
          <Tooltip colorTheme="red" triggerEvent="click" triggerElement={triggerElement} buttonText="Кнопка" />
      </>
  )}
</DemoTooltipWithTriggerWrapper>
<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <span ref={triggerElement}>
              <Button fullWidth>Только доп. содержание</Button>
          </span>
          <Tooltip colorTheme="red" triggerEvent="click" triggerElement={triggerElement}>
              <List>
                  <ListItem>Пункт 1</ListItem>
                  <ListItem>Пункт 2</ListItem>
              </List>
          </Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>

Цветовая тема

<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <span ref={triggerElement}>
              <Button fullWidth>Открыть белый тултип</Button>
          </span>
          <Tooltip
              triggerEvent="click"
              triggerElement={triggerElement}
              colorTheme="white"
              title="Заголовок"
              text="Белая тема (по умолчанию)"
              hasCloseButton
              buttonText="Кнопка"
          >
              Дополнительное содержимое тултипа
          </Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>
<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <span ref={triggerElement}>
              <Button fullWidth>Открыть красный тултип</Button>
          </span>
          <Tooltip
              triggerEvent="click"
              triggerElement={triggerElement}
              colorTheme="red"
              title="Заголовок"
              text="Красная тема"
              hasCloseButton
              buttonText="Кнопка"
          >
              Дополнительное содержимое тултипа
          </Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>
<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <span ref={triggerElement}>
              <Button fullWidth>Открыть синий тултип</Button>
          </span>
          <Tooltip
              triggerEvent="click"
              triggerElement={triggerElement}
              colorTheme="blue"
              title="Заголовок"
              text="Синяя тема"
              hasCloseButton
              buttonText="Кнопка"
          >
              Дополнительное содержимое тултипа
          </Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>

Размер тултипа

Для размера small отображается только контент, переданный через пропс text.

<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <span ref={triggerElement}>
              <Button fullWidth>Открыть большой тултип</Button>
          </span>
          <Tooltip
              triggerEvent="click"
              triggerElement={triggerElement}
              title="Заголовок"
              text="Большой размер"
              hasCloseButton
              buttonText="Кнопка"
          >
              Дополнительное содержимое тултипа
          </Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>
<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <span ref={triggerElement}>
              <Button fullWidth>Открыть маленький тултип</Button>
          </span>
          <Tooltip
              triggerEvent="click"
              triggerElement={triggerElement}
              size="small"
              title="Не отобразится"
              text="Маленький размер"
              hasCloseButton
              buttonText="Не отобразится"
          >
              Не отобразится
          </Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>

Размер отступов от контента

<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <Paragraph hasMargin={false}>
              Подключение к домашнему интернету осуществляется в удобное для вас время по 
              <span ref={triggerElement}>
                  <TextLink> технологиям</TextLink>
              </span> Ethernet, Docsis.
          </Paragraph>
          <Tooltip paddings="none" triggerElement={triggerElement}>
              <Paragraph hasMargin={false}>
                  Монтажник проведёт все необходимые работы под ключ.(размер текста больше)
              </Paragraph>
          </Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>
<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <Paragraph hasMargin={false}>
              Подключение к домашнему интернету осуществляется в удобное для вас время по 
              <span ref={triggerElement}>
                  <TextLink> технологиям</TextLink>
              </span> Ethernet, Docsis.
          </Paragraph>
          <Tooltip paddings="small" triggerElement={triggerElement}>
              <Paragraph hasMargin={false}>
                  Монтажник проведёт все необходимые работы под ключ.(размер текста меньше)
              </Paragraph>
          </Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>
<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <Paragraph hasMargin={false}>
              Подключение к домашнему интернету осуществляется в удобное для вас время по 
              <span ref={triggerElement}>
                  <TextLink> технологиям</TextLink>
              </span> Ethernet, Docsis.
          </Paragraph>
          <Tooltip paddings="medium" triggerElement={triggerElement}>
              <Paragraph hasMargin={false}>
                  Монтажник проведёт все необходимые работы под ключ.(размер текста меньше)
              </Paragraph>
          </Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>

Размер тултипа

C установленной шириной контента

<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <span ref={triggerElement}>Тултип будет такой же длины как контент</span>
          <Tooltip placement="bottom" isOpened={true} triggerEvent="controlled" triggerElement={triggerElement}>
              <div style={{ width: '100%', maxWidth: 460 }}>
                  Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям
                  Ethernet, Docsis. Монтажник проведёт все необходимые работы под ключ.
              </div>
          </Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>

При относительном позиционировании родительского элемента

<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <div style={{ width: 280, position: 'relative' }}>
          <span ref={triggerElement}>Тултип будет такой же длины как родитель</span>
          <Tooltip placement="bottom" isOpened={true} triggerEvent="controlled" triggerElement={triggerElement}>
              <div>
                  Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям
                  Ethernet, Docsis. Монтажник проведёт все необходимые работы под ключ.
              </div>
          </Tooltip>
      </div>
  )}
</DemoTooltipWithTriggerWrapper>

Расположение стрелки тултипа

<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <div style={{ position: 'relative', maxWidth: '220px' }}>
          <span ref={triggerElement}>
              <Button fullWidth>Относительно триггер-элемента</Button>
          </span>
          <Tooltip triggerEvent="click" triggerElement={triggerElement} placement="bottom" paddings="small">
              Выравнивание стрелки по умолчанию
          </Tooltip>
      </div>
  )}
</DemoTooltipWithTriggerWrapper>
<DemoTooltipWithTriggerWrapper>
  {({ triggerElement, targetElement }) => (
      <div style={{ position: 'relative', maxWidth: '220px' }}>
          <span ref={triggerElement}>
              <Button fullWidth>
                  Относительно таргет-элемента
                  <span ref={targetElement}>▼</span>
              </Button>
          </span>
          <Tooltip
              triggerEvent="click"
              triggerElement={triggerElement}
              targetElement={targetElement}
              placement="bottom"
              paddings="small"
          >
              Использование targetElement для выравнивания стрелки
          </Tooltip>
      </div>
  )}
</DemoTooltipWithTriggerWrapper>

Код DemoTooltipWithTriggerWrapperexport const DemoTooltipWithTriggerWrapper = ({ children }) => {
    const triggerElement = (React.useRef < HTMLElement) | (null > null);
    const targetElement = (React.useRef < HTMLElement) | (null > null);

    return children({
        triggerElement,
        targetElement,
    });
};

Выравнивание по boundary-элементу

<DemoTooltipWithTriggerWrapper>
  {({ triggerElement, boundaryElement }) => (
      <>
          <Paragraph hasMargin={false}>
              <span
                  ref={boundaryElement}
                  style={{
                      outline: '1px solid rgba(0,0,0,0.1)',
                      padding: '12px',
                  }}
              >
                  Тултип выровнен по границе этого
                  <span ref={triggerElement}>
                      <TextLink> текста.</TextLink>
                  </span>
              </span>
          </Paragraph>
          <Tooltip placement="bottom" triggerElement={triggerElement} boundaryElement={boundaryElement}>
              <div>
                  Тултип выровнен по границе boundaryElement, даже несмотря на то, что он больше не центрируется.
              </div>
          </Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>

Код DemoTooltipWithTriggerWrapperexport const DemoTooltipWithTriggerWrapper = ({ children }) => {
    const triggerElement = (React.useRef < HTMLElement) | (null > null);
    const boundaryElement = (React.useRef < HTMLElement) | (null > null);

    return children({
        triggerElement,
        boundaryElement,
    });
};

Смена типа взаимодействия с триггер-элементом

При первом наведении мыши на элемент, когда тултип открыт

<DemoTooltipWithTriggerWrapper>
  {({ triggerElement, triggerEvent, handleTriggerChange }) => (
      <>
          <span onMouseEnter={() => handleTriggerChange(TriggerEvent.HOVER)} ref={triggerElement}>
              <Button fullWidth>Текущая эмуляция - {triggerEvent}</Button>
          </span>
          <Tooltip isOpened={true} triggerEvent={triggerEvent} triggerElement={triggerElement}>
              {triggerEvent}
          </Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>
<DemoTooltipWithTriggerWrapper>
  {({ triggerElement, triggerEvent, handleTriggerChange }) => (
      <>
          <span onMouseEnter={() => handleTriggerChange(TriggerEvent.CLICK)} ref={triggerElement}>
              <Button fullWidth>Текущая эмуляция - {triggerEvent}</Button>
          </span>
          <Tooltip isOpened={true} triggerEvent={triggerEvent} triggerElement={triggerElement}>
              {triggerEvent}
          </Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>

Код DemoTooltipWithTriggerWrapperexport const DemoTooltipWithTriggerWrapper = ({ children }) => {
    const triggerElement = (React.useRef < HTMLElement) | (null > null);
    const [triggerEvent, setTriggerEvent] = React.useState(TriggerEvent.CONTROLLED);

    const handleTriggerChange = React.useCallback(
        trigger => {
            if (!isTriggered) {
                setIsTriggered(true);
                setTriggerEvent(trigger);
            }
        },
        [isTriggered],
    );

    return children({
        triggerElement,
        triggerEvent,
        handleTriggerChange,
    });
};

При выборе из списка

<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <DemoSelectTriggerWrapper>
          {({ onSelect, currentValue }) => (
              <DemoControlledTooltipWrapper isOpen={true}>
                  {({ isOpened, handleToggle }) => (
                      <>
                          <div>
                              <span ref={triggerElement}>
                                  <TextLink>Эмуляция тултипа</TextLink>
                              </span>
                              <Tooltip
                                  isOpened={isOpened}
                                  triggerEvent={currentValue}
                                  triggerElement={triggerElement}
                              >
                                  {currentValue}
                              </Tooltip>
                          </div>
                          <div style={{ width: 250 }}>
                              <Select
                                  label="Изменить эмуляцию"
                                  onSelect={onSelect}
                                  placeholder="Выберите эмуляцию"
                                  items={triggerEvents}
                                  currentValue={currentValue}
                              />
                          </div>
                          <Button
                              fullWidth
                              onClick={handleToggle}
                              disabled={currentValue !== TriggerEvent.CONTROLLED}
                          >
                              Переключение тултипа
                          </Button>
                      </>
                  )}
              </DemoControlledTooltipWrapper>
          )}
      </DemoSelectTriggerWrapper>
  )}
</DemoTooltipWithTriggerWrapper>

Код DemoControlledTooltipWrapperexport const DemoControlledTooltipWrapper = ({ children, isOpen = false }) => {
    const [isOpened, setIsOpened] = React.useState < boolean > isOpen;
    const handleToggle = () => setIsOpened(open => !open);

    return children({
        isOpened,
        handleToggle,
    });
};

Управление компонентом снаружи

<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <DemoControlledTooltipWrapper>
          {({ isOpened, handleOpen, handleClose }) => (
              <>
                  <span
                      ref={triggerElement}
                      style={{
                          width: 250,
                      }}
                  >
                      <TextField placeholder="Сфокусируся на мне" onFocus={handleOpen} onBlur={handleClose} />
                  </span>
                  <Tooltip isOpened={isOpened} triggerEvent="controlled" triggerElement={triggerElement}>
                      <Paragraph hasMargin={false}>
                          Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям
                          Ethernet, Docsis. Монтажник проведёт все необходимые работы под ключ.
                      </Paragraph>
                  </Tooltip>
              </>
          )}
      </DemoControlledTooltipWrapper>
  )}
</DemoTooltipWithTriggerWrapper>

C сохранением внутренних обработчиков для триггер-элемента

<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <span ref={triggerElement}>
              <Button fullWidth>Навести</Button>
          </span>
          <DemoControlledTooltipWrapper>
              {({ isOpened, handleOpen, handleClose }) => (
                  <Tooltip
                      onOpen={handleOpen}
                      onClose={handleClose}
                      isOpened={isOpened}
                      triggerElement={triggerElement}
                  >
                      <Paragraph>
                          Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям
                          Ethernet, Docsis. Монтажник проведёт все необходимые работы под ключ.
                      </Paragraph>
                      <Button onClick={handleClose}>Закрыть</Button>
                  </Tooltip>
              )}
          </DemoControlledTooltipWrapper>
      </>
  )}
</DemoTooltipWithTriggerWrapper>
<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <span ref={triggerElement}>
              <Button fullWidth>Кликнуть</Button>
          </span>
          <DemoControlledTooltipWrapper>
              {({ isOpened, handleOpen, handleClose }) => (
                  <Tooltip
                      onOpen={handleOpen}
                      onClose={handleClose}
                      isOpened={isOpened}
                      triggerEvent="click"
                      triggerElement={triggerElement}
                  >
                      <Paragraph>
                          Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям
                          Ethernet, Docsis. Монтажник проведёт все необходимые работы под ключ.
                      </Paragraph>
                      <Button onClick={handleClose}>Закрыть</Button>
                  </Tooltip>
              )}
          </DemoControlledTooltipWrapper>
      </>
  )}
</DemoTooltipWithTriggerWrapper>

С использованием порталов

<DemoTooltipWithTriggerWrapper>
  {({ triggerElement }) => (
      <>
          <span ref={triggerElement}>
              <Button fullWidth>Навести</Button>
          </span>
          <Tooltip isPortal portalSelector="body" triggerElement={triggerElement}>
              Tooltip добавляется в конец document.body
          </Tooltip>
      </>
  )}
</DemoTooltipWithTriggerWrapper>