Tooltip: Add new hideOnClick prop

[brookewp]

What?

While looking into replacing the ui/tooltip component, I came across a feature that isn't currently possible with our Tooltip component, due to legacy behavior where the tooltip is hidden on anchor click. This implementation of ui/tooltip can be found in ColorPicker and the feature by using the copy button:

Why?

To make a more dynamic tooltip possible, like in the case of ColorPicker's copy button:

gutenberg/packages/components/src/color-picker/color-copy-button.tsx

Lines 61 to 63 in 0cf7898

	{ copiedColor === color.toHex()
	? __( 'Copied!' )
	: __( 'Copy' ) }

How?

To avoid a regression, an optional prop of hideOnClick with a default of true has been added. By default, it will behave the same as it does now, but there will be an option to hide the tooltip when the anchor. This will allow for possibilities like the abovementioned example.

A test has been added to test the false case to ensure the behavior is as expected.

Testing Instructions

1. Ensure tests pass npm run test:unit packages/components/src/tooltip/test/index.tsx
2. npm run storybook:dev
3. See new prop and type
4. Toggle option and ensure tooltip is hidden on anchor click when hideOnClick is set to true and stays visible when false

[github-actions]

Flaky tests detected in 7b75dc9905d657f8b83030257c1b7bbbdeef565c.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6166668891
📝 Reported issues:

• [Flaky Test] should partially select with shift + click (@webkit) #53524 in /test/e2e/specs/editor/various/multi-block-selection.spec.js

[ciampo]

Looks good to me! And thank you for adding unit tests 🚀

Let's add a CHANGELOG entry before merging.

[tyxla]

Might be useful to have a test to confirm that if hideOnClick is true or not specified, the tooltip still gets hidden on anchor click.

[ciampo]

We have a test that is kind-of implicitly testing for that

gutenberg/packages/components/src/tooltip/test/index.tsx

Lines 85 to 97 in bfe8550

	it( 'should not show tooltip on focus as result of mouse click', async () => {
	const user = userEvent.setup();
	render( <Tooltip { ...props } /> );
	await user.click( screen.getByRole( 'button', { name: /Button/i } ) );
	expect(
	screen.queryByRole( 'tooltip', { name: /tooltip text/i } )
	).not.toBeInTheDocument();
	await cleanupTooltip( user );
	} );

Although I'd understand if you preferred having a more explicit check.

[tyxla]

I guess we can also expand the test description if we want, but yeah, that test does the job IMHO 👍