Tooltip: Add new hideOnClick prop (#54406)

* Tooltip: Add new `hideOnClick` prop * Update changelog
WordPress · Sep 13, 2023 · db0ec5c · db0ec5c · github-actions · Sep 13, 2023
1 parent 2e70fa1
commit db0ec5c
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 1 deletion.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -10,6 +10,7 @@
 -   `Tooltip`: Replace the existing tooltip to simplify the implementation and improve accessibility while maintaining the same behaviors and API ([#48440](https://github.com/WordPress/gutenberg/pull/48440)).
 -   `Dropdown` and `DropdownMenu`: support controlled mode for the dropdown's open/closed state ([#54257](https://github.com/WordPress/gutenberg/pull/54257)).
 -   `BorderControl`: Apply proper metrics and simpler text ([#53998](https://github.com/WordPress/gutenberg/pull/53998)).
+-   `Tooltip`: Add new `hideOnClick` prop ([#54406](https://github.com/WordPress/gutenberg/pull/54406)).
 
 ### Bug Fix
 

diff --git a/packages/components/src/tooltip/README.md b/packages/components/src/tooltip/README.md
@@ -35,6 +35,13 @@ The amount of time in milliseconds to wait before showing the tooltip.
 -   Required: No
 -   Default: `700`
 
+#### `hideOnClick`: `boolean`
+
+Option to hide the tooltip when the anchor is clicked.
+
+-   Required: No
+-   Default: `true`
+
 #### `position`: `string`
 
 The direction in which the tooltip should open relative to its parent node. Specify y- and x-axis as a space-separated string. Supports `"top"`, `"middle"`, `"bottom"` y axis, and `"left"`, `"center"`, `"right"` x axis.

diff --git a/packages/components/src/tooltip/index.tsx b/packages/components/src/tooltip/index.tsx
@@ -25,6 +25,7 @@ function Tooltip( props: TooltipProps ) {
 	const {
 		children,
 		delay = TOOLTIP_DELAY,
+		hideOnClick = true,
 		position = 'bottom',
 		shortcut,
 		text,
@@ -55,7 +56,7 @@ function Tooltip( props: TooltipProps ) {
 		<>
 			<Ariakit.TooltipAnchor
 				onBlur={ tooltipStore.hide }
-				onClick={ tooltipStore.hide }
+				onClick={ hideOnClick ? tooltipStore.hide : undefined }
 				store={ tooltipStore }
 				render={ isOnlyChild ? children : undefined }
 			>

diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
@@ -310,4 +310,26 @@ describe( 'Tooltip', () => {
 			await screen.findByRole( 'button', { description: 'tooltip text' } )
 		).toBeInTheDocument();
 	} );
+
+	it( 'should not hide tooltip when the anchor is clicked if hideOnClick is false', async () => {
+		const user = userEvent.setup();
+
+		render( <Tooltip { ...props } hideOnClick={ false } /> );
+
+		const button = screen.getByRole( 'button', { name: /Button/i } );
+
+		await user.hover( button );
+
+		expect(
+			await screen.findByRole( 'tooltip', { name: /tooltip text/i } )
+		).toBeVisible();
+
+		await user.click( button );
+
+		expect(
+			screen.getByRole( 'tooltip', { name: /tooltip text/i } )
+		).toBeVisible();
+
+		await cleanupTooltip( user );
+	} );
 } );
diff --git a/packages/components/src/tooltip/types.ts b/packages/components/src/tooltip/types.ts
@@ -11,6 +11,12 @@ export type TooltipProps = {
 	 * **Note**: Accepts only one child element.
 	 */
 	children: React.ReactElement;
+	/**
+	 * Option to hide the tooltip when the anchor is clicked.
+	 *
+	 * @default true
+	 */
+	hideOnClick?: boolean;
 	/**
 	 * The amount of time in milliseconds to wait before showing the tooltip.
 	 *