[FEAT REQ] Support combination of hover and openOnClick

[mdmower-csnw]

Problem to solve

I use dual tooltip components (see "Alternatives considered" below) to achieve a goal of showing the tooltip on hover and letting a click activate the tooltip that keeps it open even when the mouse leaves the tooltip anchor. It's a bit crude because it really does result in two tooltips overlaying (exactly) for the on-click open. You can tell because the background opacity of the two stacked tooltips is less transparent.

Proposed solution

It would be great if a single tooltip component could be configured to show both on hover and on click, where the latter would suppress closing the tooltip when the mouse leaves the anchor.

Alternatives considered

Dual tooltip components applied to the same anchor:

<Tooltip anchorSelect={`#${CSS.escape(id)}`} place="bottom" className="z-top" openOnClick>
  {children}
</Tooltip>
<Tooltip anchorSelect={`#${CSS.escape(id)}`} place="bottom" className="z-top">
  {children}
</Tooltip>

Dynamically modifying close events, but I'm a little unsure of the safety of modifying close events while the tooltip is already open via hover:

export default function QuestionTooltip({id, className, children}: Props) {
  const [is_pinned, setIsPinned] = useState(false);
  return (
    <>
      <Icon.Help
        id={id}
        size={3}
        color="gray"
        className={className}
        aria-label="Tip"
        role="button"
        tabIndex={0}
        onClick={() => setIsPinned(true)}
      />
      <Tooltip
        anchorSelect={`#${CSS.escape(id)}`}
        place="bottom"
        className="z-top"
        openEvents={{mouseenter: true, focus: true, click: true}}
        closeEvents={is_pinned ? {} : {mouseleave: true, blur: true}}
        globalCloseEvents={{clickOutsideAnchor: true, escape: true}}
        afterHide={() => setIsPinned(false)}
      >
        {children}
      </Tooltip>
    </>
  );
}

Example usage

Additional context

Somewhat related request that didn't receive any comments: #647. Another tangentially related feature request that describes a past behavior where hover and on-click could both be applied: #946.

Checks

• I searched existing issues and did not find an open match.

[danielbarion]

@mdmower-csnw can you please check if this is what you need?

https://react-tooltip.com/docs/examples/state

By managing the state you can control when to open it (through click or hover or any other type of event).