使用荧光笔时无法看到工具提示

Question

上下文：我有 table 个带有省略号的单元格，所以我想在标题上有一个工具提示。目前我正在使用 Material UI Tooltip. Also, since there is a search option and hence I am using the highlighter react-highlight-words 来突出显示搜索词。

问题：当使用 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>

Answer 1

它不起作用，因为您使用的自定义组件不支持 API 允许您将 ref 传递给 DOM 元素。 <Tooltip/> 需要子引用知道 DOM 元素在哪里，这样它才能正确定位自己。

您可以使用 React.forwardRef() 来修复它，它允许 <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>
  );
}

现场演示

Answer 2

我浏览了工具提示和荧光笔的文档，发现， Tooltip 只需要一个直接子项，而 Highlighter 则渲染多个子项。因此，简单的解决方案是用一些标签等包裹高亮组件

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

Live Demo

使用荧光笔时无法看到工具提示

Unable to see the Tooltip while using Highlighter

tooltip

reactjs

material-ui

highlighter

现场演示