Multiple tooltip in same page open all at the same time

I usually have multiple react-tooltip for each place I want to show a tooltip.

Problem, after clicking the second tooltip, the first tooltip does not close. Therefore, user is seeing both tooltip opening at the same time.

My assumption is that data-for and id is there to avoid this from happening

You can also see this demo on

<a data-event="click" data-for="first-click" data-tip="firstClick">
   first tooltip
</a>
<ReactTooltip globalEventOff="click" id="first-click" />

<a data-event="click" data-for="second-click" data-tip="second-click">
  second tooltip
</a>
<ReactTooltip globalEventOff="click" id="second-click" />

I understand that a better way is to put only one reacttooltip for the whole app. But, is there any way to make multiple reacttooltip to work?

[kkowalczuk]

Not sure if that will fulfill your requirements, but if you reach this issue there is a chance that below workaround may come in handy:

const TooltipDemo = (props) => {
  const [isTooltipOpen, setTooltipOpen] = React.useState(false)
  const tooltipWrapperRef = React.useRef(null)

  const hideTooltipHandler = React.useCallback(() => {
    const tooltipWrapperEl = tooltipWrapperRef.current
    if (tooltipWrapperEl) {
      ReactTooltip.hide(tooltipWrapperEl)
      setTooltipOpen(false)
      document.removeEventListener("click", hideTooltipHandler)
    }
  }, [])

  const onTooltipTriggerClick = React.useCallback(() => {
    const tooltipWrapperEl = tooltipWrapperRef.current
    if (tooltipWrapperEl) {
      if (isTooltipOpen) {
        ReactTooltip.hide(tooltipWrapperEl)
        setTooltipOpen(false)
      } else {
        ReactTooltip.show(tooltipWrapperEl)
        setTooltipOpen(true)

        document.addEventListener("click", hideTooltipHandler)
      }
    }
  }, [isTooltipOpen])

  React.useEffect(() => {
    return () => {
      document.removeEventListener("click", hideTooltipHandler)
    }
  }, [])

  return (
    <section>
      <div
        data-tip
        data-for={props.id}
        ref={tooltipWrapperRef}
        data-event="click"
        data-event-off=""
        onClick={onTooltipTriggerClick}
      >
        /* your tooltip trigger here */
      </div>
      <ReactTooltip
        id={props.id}
        place="bottom"
        type="light"
        border
        isCapture
        effect="solid"
      >
        /* your tooltip content here */
      </ReactTooltip>
    </section>
  )
}

With multiple TooltipDemo components on one page the problem described by @joedevgee no longer occurs.

[lestgabo]

@kkowalczuk do you mind doing your workaround using render props? I don’t understand hooks that much yet