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>