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`](https://material-ui.com/api/tooltip/). Also, since there is a search option and hence I am using the highlighter [react-highlight-words](https://www.npmjs.com/package/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](https://www.npmjs.com/package/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>

```