Unable to see the Tooltip while using Highlighter

Question

Context: I have table cell which have ellipsis, so I want to have a tooltip over the title. Currently I am using Material UI Tooltip. Also, since there is a search option and hence I am using the highlighter react-highlight-words to highlight the search term.

Problem: When wrapping the Highlighter component with the Tooltip, the tooltip is not popping up as it does usually. I have used react-tooltip instead and it works.

Below is the code snippet of what I am trying to render :-

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

Seeking some help how to utilise the MUI Tooltip along with the Highlighter.

Here is the code when using 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

It doesn't work because you are using a custom component that doesn't support the API that let you pass the ref down to the DOM element. The <Tooltip/> needs the child reference to know where the DOM element is so it can position itself correctly.

You can fix it by using React.forwardRef() which allow <Tooltip/> to access the children 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>
  );
}

Live Demo

Answer 2

I went through the documentation for the Tooltip and the Highlighter and found that, Tooltip requires only one direct child, and the Highlighter renders multiple child. Hence, the simple solution was to wrap the Highlight Component with some <span> tag, etc.

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

Live Demo