ReactTooltip.show does not work in Functional Components

Question

I want to show the tooltip based on some logic, which means I'll execute ReactTooltip.show to show the Tooltip manually.

As of now, the example in the docs mention passing the reference of the target to the function, which is not working in my case.

Here is a link to the code sandbox I created, showing a sample structure of my code: https://codesandbox.io/s/reacttooltip-sandbox-ovzfe

The click of Show tooltip 3 is not showing the tooltip on the below p tag.

Answer 1

First of all you need forwardRef

and also you need the properties inside your paragraph

  <p
    ref={ref}
    data-tip="tooltip"
    data-for={props.dataFor}
    data-event="click"
  >
    This is Tooltip 3
  </p>

I added an extra property dataFor to be more customizable

sandbox

And here is a sandbox with useRef instead of useState