Tooltip showing on hover when event is set to click

[6xtvo]

I tried these two following methods to have a button show the tooltip when clicked, but the tooltip still appears on hover.

  <div className="flex flex-row items-center gap-x-2">
      <span className="relative inline-flex w-auto"
          ref={(ref: HTMLSpanElement | null): HTMLSpanElement | null => btn = ref}
          data-tip="Copied to clipboard"
          onClick={(): Promise<void> => navigator.clipboard.writeText(`https://discord.com/events/${event.guild_id}/${event.id}`)}
          data-event="click"
          data-event-off="click"
      >
          <a
              type="button"
              className="inline-flex flex-row gap-x-1 font-semibold items-center justify-center w-auto px-4 py-2 text-xs rounded-sm md:w-auto bg-indigo-400 hover:bg-indigo-300 text-mtxWhite"
          >
              <Icon className="text-mtxWhite h-3" icon={faShare} />
              Share
          </a>
          <ReactTooltip class="tooltip" effect="solid" event="click" eventOff="click" />
      </span>
  </div>

<div className="flex flex-row items-center gap-x-2">
    <span className="relative inline-flex w-auto"
        ref={(ref: HTMLSpanElement | null): HTMLSpanElement | null => btn = ref}
        data-tip="Copied to clipboard"
        onClick={(): void => {
            i = !i;
            if (i) {
                ReactTooltip.show(btn as HTMLElement);
                navigator.clipboard.writeText(`https://discord.com/events/${event.guild_id}/${event.id}`);
            } else if (!i) ReactTooltip.hide(btn as HTMLElement);
        }}
        data-event="click"
        data-event-off="click"
    >
        <a
            type="button"
            className="inline-flex flex-row gap-x-1 font-semibold items-center justify-center w-auto px-4 py-2 text-xs rounded-sm md:w-auto bg-indigo-400 hover:bg-indigo-300 text-mtxWhite"
        >
            <Icon className="text-mtxWhite h-3" icon={faShare} />
            Share
        </a>
        <ReactTooltip class="tooltip" effect="solid" event="click" eventOff="click" />
    </span>
</div>