diff --git a/airflow-core/src/airflow/ui/src/components/BasicTooltip.tsx b/airflow-core/src/airflow/ui/src/components/BasicTooltip.tsx
new file mode 100644
index 0000000000000..96400e5d5f053
--- /dev/null
+++ b/airflow-core/src/airflow/ui/src/components/BasicTooltip.tsx
@@ -0,0 +1,127 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Box, Portal } from "@chakra-ui/react";
+import type { ReactElement, ReactNode } from "react";
+import { cloneElement, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+
+type Props = {
+  readonly children: ReactElement;
+  readonly content: ReactNode;
+};
+
+const offset = 8;
+
+export const BasicTooltip = ({ children, content }: Props): ReactElement => {
+  const triggerRef = useRef<HTMLElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [showOnTop, setShowOnTop] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout>();
+
+  const handleMouseEnter = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      setIsOpen(true);
+    }, 500);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = undefined;
+    }
+    setIsOpen(false);
+  }, []);
+
+  // Calculate position based on actual tooltip height before paint
+  useLayoutEffect(() => {
+    if (isOpen && triggerRef.current && tooltipRef.current) {
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const tooltipHeight = tooltipRef.current.clientHeight;
+      const wouldOverflow = triggerRect.bottom + offset + tooltipHeight > globalThis.innerHeight;
+
+      setShowOnTop(wouldOverflow);
+    }
+  }, [isOpen]);
+
+  // Cleanup on unmount
+  useEffect(
+    () => () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    },
+    [],
+  );
+
+  // Clone children and attach event handlers + ref
+  const trigger = cloneElement(children, {
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    ref: triggerRef,
+  });
+
+  if (!isOpen || !triggerRef.current) {
+    return trigger;
+  }
+
+  const rect = triggerRef.current.getBoundingClientRect();
+  const { scrollX, scrollY } = globalThis;
+
+  return (
+    <>
+      {trigger}
+      <Portal>
+        <Box
+          bg="bg.inverted"
+          borderRadius="md"
+          boxShadow="md"
+          color="fg.inverted"
+          fontSize="sm"
+          left={`${rect.left + scrollX + rect.width / 2}px`}
+          paddingX="3"
+          paddingY="2"
+          pointerEvents="none"
+          position="absolute"
+          ref={tooltipRef}
+          top={showOnTop ? `${rect.top + scrollY - offset}px` : `${rect.bottom + scrollY + offset}px`}
+          transform={showOnTop ? "translate(-50%, -100%)" : "translateX(-50%)"}
+          whiteSpace="nowrap"
+          zIndex="popover"
+        >
+          <Box
+            borderLeft="4px solid transparent"
+            borderRight="4px solid transparent"
+            height={0}
+            left="50%"
+            position="absolute"
+            transform="translateX(-50%)"
+            width={0}
+            {...(showOnTop
+              ? { borderTop: "4px solid var(--chakra-colors-bg-inverted)", bottom: "-4px" }
+              : { borderBottom: "4px solid var(--chakra-colors-bg-inverted)", top: "-4px" })}
+          />
+          {content}
+        </Box>
+      </Portal>
+    </>
+  );
+};
diff --git a/airflow-core/src/airflow/ui/src/components/DagRunInfo.tsx b/airflow-core/src/airflow/ui/src/components/DagRunInfo.tsx
index 0fa1cab76585a..fe6370fb8ddf4 100644
--- a/airflow-core/src/airflow/ui/src/components/DagRunInfo.tsx
+++ b/airflow-core/src/airflow/ui/src/components/DagRunInfo.tsx
@@ -42,7 +42,7 @@ const DagRunInfo = ({ endDate, logicalDate, runAfter, startDate, state }: Props)
         <VStack align="left" gap={0}>
           {state === undefined ? undefined : (
             <Text>
-              {translate("state")}: {state}
+              {translate("state")}: {translate(`common:states.${state}`)}
             </Text>
           )}
           {Boolean(logicalDate) ? (
diff --git a/airflow-core/src/airflow/ui/src/components/HoverTooltip.tsx b/airflow-core/src/airflow/ui/src/components/HoverTooltip.tsx
deleted file mode 100644
index 46466858caec6..0000000000000
--- a/airflow-core/src/airflow/ui/src/components/HoverTooltip.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-/*!
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { Portal } from "@chakra-ui/react";
-import { useState, useRef, useCallback, cloneElement } from "react";
-import type { ReactElement, ReactNode, RefObject } from "react";
-
-type Props = {
-  readonly children: ReactElement;
-  readonly delayMs?: number;
-  readonly tooltip: (triggerRef: RefObject<HTMLElement>) => ReactNode;
-};
-
-export const HoverTooltip = ({ children, delayMs = 200, tooltip }: Props) => {
-  const triggerRef = useRef<HTMLElement>(null);
-  const [isOpen, setIsOpen] = useState(false);
-  const timeoutRef = useRef<NodeJS.Timeout>();
-
-  const handleMouseEnter = useCallback(() => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    timeoutRef.current = setTimeout(() => {
-      setIsOpen(true);
-    }, delayMs);
-  }, [delayMs]);
-
-  const handleMouseLeave = useCallback(() => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = undefined;
-    }
-    setIsOpen(false);
-  }, []);
-
-  const trigger = cloneElement(children, {
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    ref: triggerRef,
-  });
-
-  return (
-    <>
-      {trigger}
-      {Boolean(isOpen) && <Portal>{tooltip(triggerRef)}</Portal>}
-    </>
-  );
-};
diff --git a/airflow-core/src/airflow/ui/src/components/TaskInstanceTooltip.tsx b/airflow-core/src/airflow/ui/src/components/TaskInstanceTooltip.tsx
index 025463dc955f6..a3494ee4a0b01 100644
--- a/airflow-core/src/airflow/ui/src/components/TaskInstanceTooltip.tsx
+++ b/airflow-core/src/airflow/ui/src/components/TaskInstanceTooltip.tsx
@@ -43,7 +43,10 @@ const TaskInstanceTooltip = ({ children, positioning, taskInstance, ...rest }: P
       content={
         <Box>
           <Text>
-            {translate("state")}: {taskInstance.state}
+            {translate("state")}:{" "}
+            {taskInstance.state
+              ? translate(`common:states.${taskInstance.state}`)
+              : translate("common:states.no_status")}
           </Text>
           {"dag_run_id" in taskInstance ? (
             <Text>
diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.tsx b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.tsx
index f3dd0b3dc077f..c452cf43a7953 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.tsx
@@ -17,9 +17,11 @@
  * under the License.
  */
 import { Flex, type FlexProps } from "@chakra-ui/react";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
 import type { DagRunState, TaskInstanceState } from "openapi/requests/types.gen";
+import { BasicTooltip } from "src/components/BasicTooltip";
 
 type Props = {
   readonly dagId: string;
@@ -41,39 +43,53 @@ export const GridButton = ({
   state,
   taskId,
   ...rest
-}: Props) =>
-  isGroup ? (
-    <Flex
-      background={`${state}.solid`}
-      borderRadius={2}
-      height="10px"
-      minW="14px"
-      pb="2px"
-      px="2px"
-      title={`${label}\n${state}`}
-      {...rest}
-    >
-      {children}
-    </Flex>
-  ) : (
-    <Link
-      replace
-      to={{
-        pathname: `/dags/${dagId}/runs/${runId}/${taskId === undefined ? "" : `tasks/${taskId}`}`,
-        search: searchParams.toString(),
-      }}
-    >
+}: Props) => {
+  const { t: translate } = useTranslation();
+
+  const tooltipContent = (
+    <>
+      {label}
+      <br />
+      {translate("state")}:{" "}
+      {state ? translate(`common:states.${state}`) : translate("common:states.no_status")}
+    </>
+  );
+
+  return isGroup ? (
+    <BasicTooltip content={tooltipContent}>
       <Flex
         background={`${state}.solid`}
         borderRadius={2}
         height="10px"
+        minW="14px"
         pb="2px"
         px="2px"
-        title={`${label}\n${state}`}
-        width="14px"
         {...rest}
       >
         {children}
       </Flex>
-    </Link>
+    </BasicTooltip>
+  ) : (
+    <BasicTooltip content={tooltipContent}>
+      <Link
+        replace
+        to={{
+          pathname: `/dags/${dagId}/runs/${runId}/${taskId === undefined ? "" : `tasks/${taskId}`}`,
+          search: searchParams.toString(),
+        }}
+      >
+        <Flex
+          background={`${state}.solid`}
+          borderRadius={2}
+          height="10px"
+          pb="2px"
+          px="2px"
+          width="14px"
+          {...rest}
+        >
+          {children}
+        </Flex>
+      </Link>
+    </BasicTooltip>
   );
+};
diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx
index ddf294353cb70..d4d775da97771 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx
@@ -23,9 +23,9 @@ import { useTranslation } from "react-i18next";
 import { Link, useLocation, useParams, useSearchParams } from "react-router-dom";
 
 import type { LightGridTaskInstanceSummary } from "openapi/requests/types.gen";
+import { BasicTooltip } from "src/components/BasicTooltip";
 import { StateIcon } from "src/components/StateIcon";
 import Time from "src/components/Time";
-import { Tooltip } from "src/components/ui";
 import { type HoverContextType, useHover } from "src/context/hover";
 import { buildTaskInstanceUrl } from "src/utils/links";
 
@@ -106,35 +106,38 @@ const Instance = ({ dagId, instance, isGroup, isMapped, onClick, runId, taskId }
       py={0}
       transition="background-color 0.2s"
     >
-      <Link
-        id={`grid-${runId}-${taskId}`}
-        onClick={onClick}
-        replace
-        to={{
-          pathname: getTaskUrl(),
-          search: redirectionSearch,
-        }}
+      <BasicTooltip
+        content={
+          <>
+            {translate("taskId")}: {taskId}
+            <br />
+            {translate("state")}:{" "}
+            {instance.state
+              ? translate(`common:states.${instance.state}`)
+              : translate("common:states.no_status")}
+            {instance.min_start_date !== null && (
+              <>
+                <br />
+                {translate("startDate")}: <Time datetime={instance.min_start_date} />
+              </>
+            )}
+            {instance.max_end_date !== null && (
+              <>
+                <br />
+                {translate("endDate")}: <Time datetime={instance.max_end_date} />
+              </>
+            )}
+          </>
+        }
       >
-        <Tooltip
-          content={
-            <>
-              {translate("taskId")}: {taskId}
-              <br />
-              {translate("state")}: {instance.state}
-              {instance.min_start_date !== null && (
-                <>
-                  <br />
-                  {translate("startDate")}: <Time datetime={instance.min_start_date} />
-                </>
-              )}
-              {instance.max_end_date !== null && (
-                <>
-                  <br />
-                  {translate("endDate")}: <Time datetime={instance.max_end_date} />
-                </>
-              )}
-            </>
-          }
+        <Link
+          id={`grid-${runId}-${taskId}`}
+          onClick={onClick}
+          replace
+          to={{
+            pathname: getTaskUrl(),
+            search: redirectionSearch,
+          }}
         >
           <Badge
             alignItems="center"
@@ -150,8 +153,8 @@ const Instance = ({ dagId, instance, isGroup, isMapped, onClick, runId, taskId }
           >
             <StateIcon size={10} state={instance.state} />
           </Badge>
-        </Tooltip>
-      </Link>
+        </Link>
+      </BasicTooltip>
     </Flex>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarCell.tsx b/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarCell.tsx
index 4428a2b4e4246..1a3c0fe30f17a 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarCell.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarCell.tsx
@@ -17,9 +17,8 @@
  * under the License.
  */
 import { Box } from "@chakra-ui/react";
-import type React from "react";
 
-import { HoverTooltip } from "src/components/HoverTooltip";
+import { BasicTooltip } from "src/components/BasicTooltip";
 
 import { CalendarTooltip } from "./CalendarTooltip";
 import type { CalendarCellData, CalendarColorMode } from "./types";
@@ -38,12 +37,6 @@ type Props = {
   readonly viewMode?: CalendarColorMode;
 };
 
-const renderTooltip =
-  (cellData: CalendarCellData | undefined, viewMode: CalendarColorMode) =>
-  (triggerRef: React.RefObject<HTMLElement>) => (
-    <CalendarTooltip cellData={cellData} triggerRef={triggerRef} viewMode={viewMode} />
-  );
-
 export const CalendarCell = ({
   backgroundColor,
   cellData,
@@ -103,5 +96,9 @@ export const CalendarCell = ({
     return cellBox;
   }
 
-  return <HoverTooltip tooltip={renderTooltip(cellData, viewMode)}>{cellBox}</HoverTooltip>;
+  return (
+    <BasicTooltip content={<CalendarTooltip cellData={cellData} viewMode={viewMode} />}>
+      {cellBox}
+    </BasicTooltip>
+  );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarTooltip.tsx b/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarTooltip.tsx
index 61f65e9b8769f..2edad9f62c24a 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarTooltip.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarTooltip.tsx
@@ -17,8 +17,6 @@
  * under the License.
  */
 import { Box, HStack, Text, VStack } from "@chakra-ui/react";
-import { useMemo } from "react";
-import type { RefObject } from "react";
 import { useTranslation } from "react-i18next";
 
 import type { CalendarCellData, CalendarColorMode } from "./types";
@@ -28,7 +26,6 @@ const SQUARE_BORDER_RADIUS = "2px";
 
 type Props = {
   readonly cellData: CalendarCellData | undefined;
-  readonly triggerRef: RefObject<HTMLElement>;
   readonly viewMode?: CalendarColorMode;
 };
 
@@ -39,48 +36,9 @@ const stateColorMap = {
   success: "success.solid",
 };
 
-export const CalendarTooltip = ({ cellData, triggerRef, viewMode = "total" }: Props) => {
+export const CalendarTooltip = ({ cellData, viewMode = "total" }: Props) => {
   const { t: translate } = useTranslation(["dag", "common"]);
 
-  const tooltipStyle = useMemo(() => {
-    if (!triggerRef.current) {
-      return { display: "none" };
-    }
-
-    const rect = triggerRef.current.getBoundingClientRect();
-
-    return {
-      backgroundColor: "var(--chakra-colors-bg-inverted)",
-      borderRadius: "4px",
-      color: "var(--chakra-colors-fg-inverted)",
-      fontSize: "14px",
-      left: `${rect.left + globalThis.scrollX + rect.width / 2}px`,
-      minWidth: "200px",
-      padding: "8px",
-      position: "absolute" as const,
-      top: `${rect.bottom + globalThis.scrollY + 8}px`,
-      transform: "translateX(-50%)",
-      whiteSpace: "nowrap" as const,
-      zIndex: 1000,
-    };
-  }, [triggerRef]);
-
-  const arrowStyle = useMemo(
-    () => ({
-      borderBottom: "4px solid var(--chakra-colors-bg-inverted)",
-      borderLeft: "4px solid transparent",
-      borderRight: "4px solid transparent",
-      content: '""',
-      height: 0,
-      left: "50%",
-      position: "absolute" as const,
-      top: "-4px",
-      transform: "translateX(-50%)",
-      width: 0,
-    }),
-    [],
-  );
-
   if (!cellData) {
     return undefined;
   }
@@ -111,38 +69,32 @@ export const CalendarTooltip = ({ cellData, triggerRef, viewMode = "total" }: Pr
       state: translate(`common:states.${state}`),
     }));
 
-  return (
-    <div style={tooltipStyle}>
-      <div style={arrowStyle} />
-      {hasRuns ? (
-        <VStack align="start" gap={2}>
-          <Text fontSize="sm" fontWeight="medium">
-            {date}
-          </Text>
-          <VStack align="start" gap={1.5}>
-            {states.map(({ color, count, state }) => (
-              <HStack gap={3} key={state}>
-                <Box
-                  bg={color}
-                  border="1px solid"
-                  borderColor="border.emphasized"
-                  borderRadius={SQUARE_BORDER_RADIUS}
-                  height={SQUARE_SIZE}
-                  width={SQUARE_SIZE}
-                />
-                <Text fontSize="xs">
-                  {count} {state}
-                </Text>
-              </HStack>
-            ))}
-          </VStack>
-        </VStack>
-      ) : (
-        <Text fontSize="sm">
-          {/* To do: remove fallback translations */}
-          {date}: {viewMode === "failed" ? translate("calendar.noFailedRuns") : translate("calendar.noRuns")}
-        </Text>
-      )}
-    </div>
+  return hasRuns ? (
+    <VStack align="start" gap={2}>
+      <Text fontSize="sm" fontWeight="medium">
+        {date}
+      </Text>
+      <VStack align="start" gap={1.5}>
+        {states.map(({ color, count, state }) => (
+          <HStack gap={3} key={state}>
+            <Box
+              bg={color}
+              border="1px solid"
+              borderColor="border.emphasized"
+              borderRadius={SQUARE_BORDER_RADIUS}
+              height={SQUARE_SIZE}
+              width={SQUARE_SIZE}
+            />
+            <Text fontSize="xs">
+              {count} {state}
+            </Text>
+          </HStack>
+        ))}
+      </VStack>
+    </VStack>
+  ) : (
+    <Text fontSize="sm">
+      {date}: {viewMode === "failed" ? translate("calendar.noFailedRuns") : translate("calendar.noRuns")}
+    </Text>
   );
 };