From f7c8e04ce64c8d1dcd570f9e5152cf8e200f53bb Mon Sep 17 00:00:00 2001
From: Tamajit-005 <tamajitsaha05@gmail.com>
Date: Sat, 6 Jun 2026 23:54:31 +0530
Subject: [PATCH 1/2] feat(Tooltip): add boundary prop to hide tooltip when it
 escapes an element

Adds an optional 'boundary' prop to useTooltip/Tooltip that activates
FloatingUI's 'hide' middleware with strategy='escaped'. When the tooltip
would overflow the boundary, it gets the 'invisible' class (clip-path:
inset(50%)) so it remains in the DOM for screen readers but is visually
hidden. The boundary is also passed to the 'flip' middleware so the
initial placement is more likely to stay inside it.

This lets consumers like Element Web keep the 'Expand map' tooltip on
location messages from overlapping the message composer at the bottom
of the timeline.
---
 src/components/Tooltip/Tooltip.tsx   |  5 ++++-
 src/components/Tooltip/useTooltip.ts | 24 ++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index e7b502812..09805ea8f 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -127,6 +127,9 @@ function TooltipContent({
   // Label tooltips are kept in the DOM even when not visually open
   if (!open && purpose !== "label") return null;
 
+  // Hide the tooltip if it has escaped its boundary (when `boundary` prop is set)
+  const escaped = floatingContext.middlewareData?.hide?.escaped ?? false;
+
   return (
     <FloatingPortal>
       <div
@@ -135,7 +138,7 @@ function TooltipContent({
         {...rest.tooltipProps}
         {...rest.getFloatingProps()}
         className={classNames(styles.tooltip, {
-          [styles.invisible]: purpose === "label" && !open,
+          [styles.invisible]: (purpose === "label" && !open) || escaped,
         })}
       >
         <FloatingArrow
diff --git a/src/components/Tooltip/useTooltip.ts b/src/components/Tooltip/useTooltip.ts
index 360c830dc..8d5ed71f8 100644
--- a/src/components/Tooltip/useTooltip.ts
+++ b/src/components/Tooltip/useTooltip.ts
@@ -9,6 +9,7 @@ import {
   arrow,
   autoUpdate,
   flip,
+  hide,
   offset,
   type OpenChangeReason,
   type Placement,
@@ -77,6 +78,17 @@ export interface CommonUseTooltipProps {
    */
   isTriggerInteractive: boolean;
 
+  /**
+   * An optional boundary element to constrain the tooltip within.
+   * When provided, the tooltip will be hidden if it escapes this boundary.
+   * Also passed to the `flip` middleware so it can choose a placement that
+   * keeps the tooltip inside the boundary.
+   * Accepts a single Element or an array of Elements. Useful for tooltips
+   * near containers they should not overlap (e.g. the message composer).
+   * @default undefined
+   */
+  boundary?: Element | null | Element[];
+
   /**
    * Additional aria-* attributes to pass through to the floating tooltip for
    * edge cases which require more user awareness like errors & alerts.
@@ -111,6 +123,7 @@ export function useTooltip({
   caption,
   "aria-atomic": ariaAtomic,
   "aria-live": ariaLive,
+  boundary,
   ...props
 }: UseTooltipProps) {
   const labelId = useId();
@@ -143,8 +156,19 @@ export function useTooltip({
         crossAxis: placement.includes("-"),
         fallbackAxisSideDirection: "start",
         padding: 5,
+        // Only pass boundary if set — FloatingUI's Boundary type excludes null
+        ...(boundary ? { boundary } : {}),
       }),
       shift({ padding: 5 }),
+      ...(boundary
+        ? [
+            hide({
+              strategy: "escaped",
+              boundary,
+              padding: 6,
+            }),
+          ]
+        : []),
       // add the little arrow along with the floating content
       arrow({
         element: arrowRef,

From 674bdffd1b58f72e98d62970aa1487ebb04b1740 Mon Sep 17 00:00:00 2001
From: Tamajit-005 <tamajitsaha05@gmail.com>
Date: Mon, 8 Jun 2026 23:02:07 +0530
Subject: [PATCH 2/2] simplify boundary prop - drop null, always include hide
 middleware

---
 src/components/Tooltip/useTooltip.ts | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/components/Tooltip/useTooltip.ts b/src/components/Tooltip/useTooltip.ts
index 8d5ed71f8..22479a9ba 100644
--- a/src/components/Tooltip/useTooltip.ts
+++ b/src/components/Tooltip/useTooltip.ts
@@ -87,7 +87,7 @@ export interface CommonUseTooltipProps {
    * near containers they should not overlap (e.g. the message composer).
    * @default undefined
    */
-  boundary?: Element | null | Element[];
+  boundary?: Element | Element[];
 
   /**
    * Additional aria-* attributes to pass through to the floating tooltip for
@@ -156,19 +156,14 @@ export function useTooltip({
         crossAxis: placement.includes("-"),
         fallbackAxisSideDirection: "start",
         padding: 5,
-        // Only pass boundary if set — FloatingUI's Boundary type excludes null
-        ...(boundary ? { boundary } : {}),
+        boundary,
       }),
       shift({ padding: 5 }),
-      ...(boundary
-        ? [
-            hide({
-              strategy: "escaped",
-              boundary,
-              padding: 6,
-            }),
-          ]
-        : []),
+      hide({
+        strategy: "escaped",
+        boundary,
+        padding: 6,
+      }),
       // add the little arrow along with the floating content
       arrow({
         element: arrowRef,