Can't make it work onClick

I might be very stupid but I can’t make it work… it’s been like an hour yet the tooltip keeps showing.

I have a button, and the tooltip.

  const tooltipRef = useRef(null);

<button
        className={styles.actionButton}
        onClick={() => {
          ReactTooltip.show(tooltipRef);
        }}
        data-tip=""
        data-event="click"
      >

<ReactTooltip type="error" ref={tooltipRef}>
        <span>Show happy face</span>
      </ReactTooltip>

I want to control when the tooltip displays or not, and I am not being able to control it. It automatically displays. What am I doing wrong?

[talesdsp]

This isn’t working because you passed the entire ref, instead of ref.current.

The following worked for me!

const idRef = useRef(null);

 <button
            ref={idRef} // here passes the ref
            data-tip="Copied!"
            onClick={() => ReactTooltip.show(idRef.current)} // here passes the ref.current
          >
            
          </button>
          <ReactTooltip
            type="success"
            event="click"
            eventOff="blur"
            delayShow={100}
            delayHide={500}
            place="bottom"
          />

[JorgeSivil]

Yeah that’s what actually happened to me. https://www.cssportal.com/css-tooltip-generator/ and that’s it haha

The problem is that I only found this library, or other bigger libraries that have a lot of things that I don’t need now, like Reactstrap or material UI