Как сделать перенос строки в тултипе

Question

const WithTooltip = ({
  children,
  text,
  width,
  placement = 'left',
}: Props): JSX.Element => (
  <Tooltip
    placement={placement}
    arrowContent={<div className="rc-tooltip-arrow-inner" />}
    overlayStyle={{ maxWidth: width || '500px', overflow: 'hidden' }}
    destroyTooltipOnHide
    overlay={text}
  >
    <div className={styles.textChildrenWithToolTip}>{children}</div>
  </Tooltip>
);

<WithTooltip
  width="300px"
  placement="top"
  text={`Запуск на v. ${task.version} \r\n 21.09 I 12:30 — 22.09 I 12:38 (24ч 8мин)`}
>
  <InfoOutlinedIcon sx={{ cursor: 'pointer' }} color="disabled" />
</WithTooltip>

Я передаю текст в свойство text в WithTooltip, затем в WithTooltip текст попадает в overlay={text}, и мне нужно чтобы в этом тексте был перенос, пробовал и \n и и пытался через это сделать dangerouslySetInnerHTML, чет все никак, это вообще возможно?

тултип из import Tooltip from 'rc-tooltip';

Answer 1

Согласно документации rc-tooltip, overlay ожидает ReactNode | () => ReactNode, значит значение можно передать как желаемый рендер HTML

Добавьте в текст рендера перенос строки HTML тегом <br />

overlay={text+'<br />'}

Или с использованием шаблонных литералов(шаблонных строк)

overlay={`${text}<br />`}

или как готовый к рендеру(реакт) HTML

overlay={<><span>{text}</span><br /></>}

или react компонент

const OverLayText = ({text}) => {
  // тут возможно какая то логика
  return (
    <>
      <span>${text}</span>
      <br />
      <span>${text}</span>
    </>
  )
}

<Tooltip
  overlay={<OverLayText text={text} />}
  // остальные пропсы
/>

Answer 2

Не пытайтесь использовать <br/> или /n, или html-тэги для переноса строки внутри передаваемых свойств - выведутся как есть. Подобное работает внутри компонентов или при установке плагина парсинга html.

В качестве решения нужно использовать компонент с необходимыми отступами и его уже передавать, чтобы использовать в overlay.

Для вашего примера примерно так:

import styles from "./styles.css";
import Tooltip from "rc-tooltip";

const WithTooltip = ({ children, width, placement = "left", component }) => (
  <Tooltip
    placement={placement}
    arrowContent={<div className="rc-tooltip-arrow-inner" />}
    overlayStyle={{ maxWidth: width || "500px", overflow: "hidden" }}
    destroyTooltipOnHide
    overlay={component}
  >
    <div className={styles.textChildrenWithToolTip}>{children}</div>
  </Tooltip>
);

export default function App() {
  return (
    <div className="App">
      <WithTooltip
        width="300px"
        placement="top"
        component={() => (
          <>
            <h3>Запуск</h3>
            <div>21.09 I 12:30 — 22.09 I 12:38 (24ч 8мин)</div>
          </>
        )}
      >
        Тут текст
      </WithTooltip>
    </div>
  );
}

В рабочем виде на codeSandbox:

БЛОГ НА HUSL

Как сделать перенос строки в тултипе

Ответы (2 шт):