1

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>

2 Answers 2

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

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

Edit 64447188/unable-to-see-the-tooltip-while-using-highlighter

2
  • We created a component with ForwardRef, and they are meant to pass ref to its child. But, we are not passing the ref in the < HighlightedSentence/>, then where is it receiving it from?
    – SHAHBAZ
    Oct 21, 2020 at 4:54
  • @SHAHBAZ You don't have to pass the ref down yourself. You expose the ref so the the Tooltip component can create and pass the the ref down to its child. See this and this Oct 21, 2020 at 11:35

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.