Add anchor styles for tooltip placement

WordPress · Mar 17, 2023 · a1eb09a · a1eb09a
1 parent 0a4134d
commit a1eb09a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/packages/components/src/ui/ariakit-tooltip/index.tsx b/packages/components/src/ui/ariakit-tooltip/index.tsx
@@ -26,11 +26,16 @@ function UnforwardedToolTip(
 	const cx = useCx();
 
 	const ToolTipClassName = cx( styles.ToolTip );
+	const ToolTipAnchorClassName = cx( styles.ToolTipAnchor );
 	const ShortcutClassName = cx( styles.Shortcut );
 
 	return (
 		<>
-			<TooltipAnchor state={ tooltipState } ref={ forwardedRef }>
+			<TooltipAnchor
+				className={ ToolTipAnchorClassName }
+				ref={ forwardedRef }
+				state={ tooltipState }
+			>
 				{ children }
 			</TooltipAnchor>
 			{ ( text || shortcut ) && (

diff --git a/packages/components/src/ui/ariakit-tooltip/styles.ts b/packages/components/src/ui/ariakit-tooltip/styles.ts
@@ -20,6 +20,10 @@ export const ToolTip = css`
 	z-index: 1000002;
 `;
 
+export const ToolTipAnchor = css`
+	display: inline-block;
+`;
+
 export const Shortcut = css`
 	margin-left: ${ space( 2 ) };
 `;