Tooltip Component: Add custom class name support

packages/components/CHANGELOG.md

@@ -1,6 +1,7 @@
 <!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
 
 ## Unreleased
+-   `Tooltip`: Add support for `className` prop ([#63157](https://github.com/WordPress/gutenberg/pull/63157)).
 
 ### Enhancements
 

packages/components/src/tooltip/index.tsx

@@ -50,6 +50,7 @@ function UnforwardedTooltip(
 		position,
 		shortcut,
 		text,
+		className,
 
 		...restProps
 	} = props;
@@ -112,7 +113,7 @@ function UnforwardedTooltip(
 			{ isOnlyChild && ( text || shortcut ) && (
 				<Ariakit.Tooltip
 					{ ...restProps }
-					className="components-tooltip"
+					className={ className === undefined ? "components-tooltip" : "components-tooltip " + className }
 					unmountOnHide
 					gutter={ 4 }
 					id={ describedById }

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

@@ -105,6 +105,33 @@ describe( 'Tooltip', () => {
 				screen.getByRole( 'button', { name: 'Anchor' } )
 			).not.toHaveAttribute( 'data-foo' );
 		} );
+
+		it( 'should add custom class to the tooltip', async () => {
+			render( <Tooltip { ...props } className='foo' /> );
+
+			// Hover over the anchor, tooltip should show
+			await hover(
+				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+			);
+
+			// Check core class
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'tooltip', {
+						name: 'tooltip text',
+					} )
+				).toHaveClass('components-tooltip')
+			);
+
+			// Check custom class
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'tooltip', {
+						name: 'tooltip text',
+					} )
+				).toHaveClass('foo')
+			);
+		} );
 	} );
 
 	describe( 'keyboard focus', () => {

packages/components/src/tooltip/types.ts

@@ -58,6 +58,12 @@ export type TooltipProps = {
 	 * The text shown in the tooltip when anchor element is focused or hovered.
 	 */
 	text?: string;
+	/**
+	 * The custom class name for the tooltip.
+	 * The default class for tooltip is `components-tooltip` and always will be added.
+	 * The custom class name will be appended to the default class.
+	 */
+	className?: string;
 };
 
 export type TooltipInternalContext = {