[EuiToolTip] Add programmatic way to close tooltips

[1Copenut]

We've received a request to add a programmatic way to close EUI tooltips: #5883

I've opted to close the previous issue and open this new one as a feature request. There was a fair bit of conversation about use cases including programmatic closures and removing focus from buttons with tooltips. My last comment to the original post was that the EUI team would explore a programmatic means to close tooltips, but that removing focus from elements (buttons primarily) that fire tooltip events was not recommended.

[cee-chen]

As noted in #6522:

As it turns out, controlling internal EuiToolTip visibility state is already currently achievable (due to it being a class component) via ref, e.g.

const toolTipRef = useRef<EuiToolTip>(null);

const hideToolTip = () => toolTipRef.current?.hideToolTip();

return (
  <EuiToolTip ref={toolTipRef} content="Tooltip content">
    <EuiButton onClick={hideToolTip}>
      Hides tooltip on click
    </EuiButton>
  </EuiToolTip>
);

After speaking to @1Copenut, we've decided against publicly documenting this functionality - this control has a lot of accessibility implications, and as a team, EUI only wants to recommend it to consumers for very very specific use cases.

The below CodeSandbox example (a button that toggles a flyout/modal/focus trap and consumers not wanting the tooltip to be re-shown on when the focus trap closes) is one such use case, primarily for when the tooltip occludes another UI element:

https://codesandbox.io/s/morning-sky-64vyoh?file=/demo.tsx:518-552

If this comes up again in future issues, and is a valid use case, we should direct consumers to the above CodeSandbox example.