From 512570e3d3a3051fc4bca93638926e0134536ace Mon Sep 17 00:00:00 2001
From: Jasperora <robert852654@gmail.com>
Date: Wed, 25 Jun 2025 12:04:53 +0800
Subject: [PATCH] Show tooltip when hovering on the button handling details
 panel

---
 .../ui/src/layouts/Details/DetailsLayout.tsx  | 59 ++++++++++---------
 1 file changed, 32 insertions(+), 27 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx b/airflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
index d1d90cf803a06..a7c922454a006 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
@@ -36,6 +36,7 @@ import { ProgressBar } from "src/components/ui";
 import { Toaster } from "src/components/ui";
 import ActionButton from "src/components/ui/ActionButton";
 import { DAGWarningsModal } from "src/components/ui/DagWarningsModal";
+import { Tooltip } from "src/components/ui/Tooltip";
 import { OpenGroupsProvider } from "src/context/openGroups";
 
 import { DagBreadcrumb } from "./DagBreadcrumb";
@@ -82,21 +83,23 @@ export const DetailsLayout = ({ children, error, isLoading, tabs }: Props) => {
       <BackfillBanner dagId={dagId} />
       <Box flex={1} minH={0}>
         {isRightPanelCollapsed ? (
-          <IconButton
-            aria-label={translate("common:showDetailsPanel")}
-            bg="bg.surface"
-            borderRadius="full"
-            boxShadow="md"
-            cursor="pointer"
-            onClick={() => setIsRightPanelCollapsed(false)}
-            position="absolute"
-            right={0}
-            size="sm"
-            top="50%"
-            zIndex={10}
-          >
-            <FaChevronLeft />
-          </IconButton>
+          <Tooltip content={translate("common:showDetailsPanel")}>
+            <IconButton
+              aria-label={translate("common:showDetailsPanel")}
+              bg="bg.surface"
+              borderRadius="full"
+              boxShadow="md"
+              cursor="pointer"
+              onClick={() => setIsRightPanelCollapsed(false)}
+              position="absolute"
+              right={0}
+              size="sm"
+              top="50%"
+              zIndex={10}
+            >
+              <FaChevronLeft />
+            </IconButton>
+          </Tooltip>
         ) : undefined}
         <PanelGroup autoSaveId={dagId} direction="horizontal" ref={panelGroupRef}>
           <Panel defaultSize={dagView === "graph" ? 70 : 20} minSize={6}>
@@ -132,18 +135,20 @@ export const DetailsLayout = ({ children, error, isLoading, tabs }: Props) => {
                 position="relative"
                 w={0.5}
               >
-                <IconButton
-                  aria-label={translate("common:collapseDetailsPanel")}
-                  bg="bg.surface"
-                  borderRadius="full"
-                  boxShadow="md"
-                  cursor="pointer"
-                  onClick={() => setIsRightPanelCollapsed(true)}
-                  size="xs"
-                  zIndex={2}
-                >
-                  <FaChevronRight />
-                </IconButton>
+                <Tooltip content={translate("common:collapseDetailsPanel")}>
+                  <IconButton
+                    aria-label={translate("common:collapseDetailsPanel")}
+                    bg="bg.surface"
+                    borderRadius="full"
+                    boxShadow="md"
+                    cursor="pointer"
+                    onClick={() => setIsRightPanelCollapsed(true)}
+                    size="xs"
+                    zIndex={2}
+                  >
+                    <FaChevronRight />
+                  </IconButton>
+                </Tooltip>
               </Box>
             </PanelResizeHandle>
           )}