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
        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 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
        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>

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

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

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

Демонстрация перестроения тултипа по всем доступным положениям.

<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>

<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
        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>

<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 }) => (
    <>
      <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>

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

Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям технологиям Ethernet, Docsis.

<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>

<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 }) => (
    <>
      <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={{ 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>

<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>

<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>

<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
    });
};

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

Эмуляция тултипа

controlled

Изменить эмуляцию

controlled

hover

click

<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>

<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>

<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>
      <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>

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