Блог

Контекст: у меня есть ячейка таблицы с многоточием, поэтому я хочу иметь всплывающую подсказку над заголовком. В настоящее время я использую Material UI Tooltip . Кроме того, поскольку есть опция поиска, и, следовательно, я использую маркер react-highlight-words для выделения поискового запроса.

Проблема: при обертывании компонента Highlighter с Tooltip помощью, всплывающая подсказка не появляется, как обычно. Вместо этого я использовал react-tooltip, и это работает.

Ниже приведен фрагмент кода того, что я пытаюсь отобразить :-

 <TableCell align="center">
<Tooltip title={title}>
  <Highlighter highlightClassName="YourHighlightClass" searchWords={[searchValue]} autoEscape textToHighlight={title} />
</Tooltip>
  

Ищу некоторую помощь, как использовать всплывающую подсказку MUI вместе с маркером.

Вот код при использовании react-tooltip:

 <TableCell align="center">
  <span data-tip={title}>
      <Highlighter highlightClassName="YourHighlightClass" searchWords={[searchValue]} autoEscape textToHighlight={title} />
      <ReactTooltip delayShow={500} effect="solid" border={false}/>
  </span>
</TableCell>
  

Я просмотрел документацию для всплывающей подсказки и маркера и обнаружил, что для всплывающей подсказки требуется только один прямой дочерний элемент, а маркер отображает несколько дочерних элементов. Следовательно, простым решением было обернуть компонент выделения некоторым <span>тегом и т. Д.

 <TableCell align="center">
  <Tooltip title={title}>
   <span>
     <Highlighter highlightClassName="YourHighlightClass" searchWords={[searchValue]} autoEscape textToHighlight={title} />
   </span>
  </Tooltip>
</TableCell>
  

Живая демонстрация

Это не работает, потому что вы используете пользовательский компонент, который не поддерживает API, позволяющий передавать ссылку в элемент DOM. <Tooltip/> Требуется дочерняя ссылка, чтобы знать, где находится элемент DOM, чтобы он мог правильно позиционировать себя.

Вы можете исправить это, используя React.forwardRef() which разрешить <Tooltip/> доступ к дочерним элементам ref

 const HighlightedSentence = React.forwardRef((props, ref) => {
  return (
    <span ref={ref} style={{ backgroundColor: "pink" }}>
      <Highlighter
        highlightClassName="YourHighlightClass"
        searchWords={["and", "or", "the"]}
        autoEscape={true}
        textToHighlight="The dog is chasing the cat. Or perhaps they're just playing?"
        {...props}
      />
    </span>
  );
});

function App() {
  return (
    <Tooltip title={"my tooltip"} placement="bottom">
      <HighlightedSentence />
    </Tooltip>
  );
}
  

Живая демонстрация