From cac44eaba82f420a101469bfb8a739ea272ce9b6 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 13 Dec 2023 17:36:59 +0100
Subject: [PATCH 1/4] Add portal and portalElement props to `Tooltip`

---
 packages/components/src/tooltip/index.tsx | 8 +++++++-
 packages/components/src/tooltip/types.ts  | 5 +++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/tooltip/index.tsx b/packages/components/src/tooltip/index.tsx
index 80407def54cd45..ad4729a0df885e 100644
--- a/packages/components/src/tooltip/index.tsx
+++ b/packages/components/src/tooltip/index.tsx
@@ -29,9 +29,13 @@ function Tooltip( props: TooltipProps ) {
 		delay = TOOLTIP_DELAY,
 		hideOnClick = true,
 		placement,
-		position,
 		shortcut,
 		text,
+		portal = true,
+		portalElement,
+
+		// Deprecated props
+		position,
 	} = props;
 
 	const baseId = useInstanceId( Tooltip, 'tooltip' );
@@ -86,6 +90,8 @@ function Tooltip( props: TooltipProps ) {
 					id={ describedById }
 					overflowPadding={ 0.5 }
 					store={ tooltipStore }
+					portal={ portal }
+					portalElement={ portalElement }
 				>
 					{ text }
 					{ shortcut && (
diff --git a/packages/components/src/tooltip/types.ts b/packages/components/src/tooltip/types.ts
index 8708ae7005f5b3..fb7692935913e5 100644
--- a/packages/components/src/tooltip/types.ts
+++ b/packages/components/src/tooltip/types.ts
@@ -58,4 +58,9 @@ export type TooltipProps = {
 	 * The text shown in the tooltip when anchor element is focused or hovered.
 	 */
 	text?: string;
+	portal?: boolean;
+	portalElement?:
+		| HTMLElement
+		| ( ( element: HTMLElement ) => HTMLElement | null )
+		| null;
 };

From 94abcf9e96f8cbfcd00b1ecf6d47aa8328c2137b Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 13 Dec 2023 17:37:21 +0100
Subject: [PATCH 2/4] Forward `portal` and `portalElement` props to Tooltip on
 `Button`

---
 packages/components/src/button/index.tsx | 4 ++++
 packages/components/src/button/types.ts  | 6 ++++++
 2 files changed, 10 insertions(+)

diff --git a/packages/components/src/button/index.tsx b/packages/components/src/button/index.tsx
index b14e85fa52f7f6..9aa9034fd9af31 100644
--- a/packages/components/src/button/index.tsx
+++ b/packages/components/src/button/index.tsx
@@ -109,6 +109,8 @@ export function UnforwardedButton(
 		variant,
 		__experimentalIsFocusable: isFocusable,
 		describedBy,
+		tooltipPortal,
+		tooltipPortalElement,
 		...buttonOrAnchorProps
 	} = useDeprecatedProps( props );
 
@@ -280,6 +282,8 @@ export function UnforwardedButton(
 				}
 				shortcut={ shortcut }
 				placement={ computedPlacement }
+				portal={ tooltipPortal }
+				portalElement={ tooltipPortalElement }
 			>
 				{ element }
 			</Tooltip>
diff --git a/packages/components/src/button/types.ts b/packages/components/src/button/types.ts
index b781786cc12711..ea312e0444d6b4 100644
--- a/packages/components/src/button/types.ts
+++ b/packages/components/src/button/types.ts
@@ -118,6 +118,12 @@ type BaseButtonProps = {
 	 * Whether this is focusable.
 	 */
 	__experimentalIsFocusable?: boolean;
+
+	tooltipPortal?: boolean;
+	tooltipPortalElement?:
+		| HTMLElement
+		| ( ( element: HTMLElement ) => HTMLElement | null )
+		| null;
 };
 
 type _ButtonProps = {

From fcc407e7a22a27ada88e6fd6b9ca1dae54090788 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 13 Dec 2023 17:39:37 +0100
Subject: [PATCH 3/4] Render data view tooltips inline

---
 packages/dataviews/src/item-actions.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/dataviews/src/item-actions.js b/packages/dataviews/src/item-actions.js
index 1b0bd5f213ca8e..8e35b0d925fd0d 100644
--- a/packages/dataviews/src/item-actions.js
+++ b/packages/dataviews/src/item-actions.js
@@ -31,6 +31,7 @@ function ButtonTrigger( { action, onClick } ) {
 			isDestructive={ action.isDestructive }
 			size="compact"
 			onClick={ onClick }
+			tooltipPortal={ false }
 		/>
 	);
 }
@@ -168,6 +169,7 @@ export default function ItemActions( { item, actions, isCompact } ) {
 							size="compact"
 							icon={ moreVertical }
 							label={ __( 'Actions' ) }
+							tooltipPortal={ false }
 						/>
 					}
 					placement="bottom-end"
@@ -190,6 +192,7 @@ function CompactItemActions( { item, primaryActions, secondaryActions } ) {
 					size="compact"
 					icon={ moreVertical }
 					label={ __( 'Actions' ) }
+					tooltipPortal={ false }
 				/>
 			}
 			placement="bottom-end"

From 93b82cf25fcebf370f468b864f8b51a052f5fa93 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 13 Dec 2023 17:39:42 +0100
Subject: [PATCH 4/4] Add higher z-index on table header to render on top of
 tooltip

---
 packages/dataviews/src/style.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index e7e06e1acd27e4..8098874be3d278 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -73,12 +73,14 @@
 		}
 	}
 	thead {
+		position: sticky;
+		top: -1px;
+		z-index: z-index(".components-tooltip") + 1;
+
 		tr {
 			border: 0;
 		}
 		th {
-			position: sticky;
-			top: -1px;
 			background-color: lighten($gray-100, 4%);
 			box-shadow: inset 0 -#{$border-width} 0 $gray-100;
 			border-top: 1px solid $gray-100;