eBay · HenriqueLimas · Mar 18, 2026 · Mar 14, 2026
diff --git a/.changeset/soft-turtles-heal.md b/.changeset/soft-turtles-heal.md
@@ -0,0 +1,5 @@
+---
+"@ebay/ui-core-react": minor
+---
+
+feat(EbayTooltip): use floating-ui for infotip,tooltip,tourtip
diff --git a/packages/ebayui-core-react/src/common/dropdown.ts b/packages/ebayui-core-react/src/common/dropdown.ts
@@ -1,48 +1,9 @@
 import { useEffect, useRef, useSyncExternalStore } from "react";
-import { autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/react";
 import Expander from "makeup-expander";
 import { ActiveDescendantOptions, createLinear, LinearActiveDescendant } from "makeup-active-descendant";
 
-export type FloatingDropdownHookReturn = {
-    overlayStyles: ReturnType<typeof useFloating>["floatingStyles"];
-    refs: {
-        host: ReturnType<typeof useFloating>["refs"]["reference"];
-        overlay: ReturnType<typeof useFloating>["refs"]["floating"];
-        setHost: ReturnType<typeof useFloating>["refs"]["setReference"];
-        setOverlay: ReturnType<typeof useFloating>["refs"]["setFloating"];
-    };
-};
-
-export type FloatingDropdownHookArgs = {
-    open?: boolean;
-    options?: FloatingDropdownHookOptions;
-};
-
-export type FloatingDropdownHookOptions = {
-    offset?: number;
-    reverse?: boolean;
-    strategy?: "fixed" | "absolute";
-};
-
-export function useFloatingDropdown({ open, options }: FloatingDropdownHookArgs): FloatingDropdownHookReturn {
-    const { floatingStyles, refs } = useFloating({
-        placement: options?.reverse ? "bottom-end" : "bottom-start",
-        strategy: options?.strategy,
-        open,
-        middleware: [offset(options?.offset ?? 4), flip(), shift()],
-        whileElementsMounted: autoUpdate,
-    });
-
-    return {
-        overlayStyles: floatingStyles,
-        refs: {
-            host: refs.reference,
-            overlay: refs.floating,
-            setHost: refs.setReference,
-            setOverlay: refs.setFloating,
-        },
-    };
-}
+export type { FloatingDropdownHookReturn, FloatingDropdownHookArgs, FloatingDropdownHookOptions } from "./floating-ui";
+export { useFloatingDropdown } from "./floating-ui";
 
 type ElementId = string;
 export type ExpanderHookArgs<T extends HTMLElement> = {

diff --git a/packages/ebayui-core-react/src/common/floating-ui.ts b/packages/ebayui-core-react/src/common/floating-ui.ts
@@ -0,0 +1,145 @@
+import { useRef } from "react";
+import { autoUpdate, flip, offset, shift, arrow, inline, useFloating, type Placement } from "@floating-ui/react";
+import { PointerDirection } from "./tooltip-utils/types";
+
+export type FloatingDropdownHookReturn = {
+    overlayStyles: ReturnType<typeof useFloating>["floatingStyles"];
+    refs: {
+        host: ReturnType<typeof useFloating>["refs"]["reference"];
+        overlay: ReturnType<typeof useFloating>["refs"]["floating"];
+        setHost: ReturnType<typeof useFloating>["refs"]["setReference"];
+        setOverlay: ReturnType<typeof useFloating>["refs"]["setFloating"];
+    };
+};
+
+export type FloatingDropdownHookArgs = {
+    open?: boolean;
+    options?: FloatingDropdownHookOptions;
+};
+
+export type FloatingDropdownHookOptions = {
+    offset?: number;
+    reverse?: boolean;
+    strategy?: "fixed" | "absolute";
+};
+
+export function useFloatingDropdown({ open, options }: FloatingDropdownHookArgs): FloatingDropdownHookReturn {
+    const { floatingStyles, refs } = useFloating({
+        placement: options?.reverse ? "bottom-end" : "bottom-start",
+        strategy: options?.strategy,
+        open,
+        middleware: [offset(options?.offset ?? 4), flip(), shift()],
+        whileElementsMounted: autoUpdate,
+    });
+
+    return {
+        overlayStyles: floatingStyles,
+        refs: {
+            host: refs.reference,
+            overlay: refs.floating,
+            setHost: refs.setReference,
+            setOverlay: refs.setFloating,
+        },
+    };
+}
+
+const POINTER_TO_PLACEMENT: Record<PointerDirection, Placement> = {
+    left: "right",
+    "left-top": "right-start",
+    "left-bottom": "right-end",
+    right: "left",
+    "right-top": "left-start",
+    "right-bottom": "left-end",
+    top: "bottom",
+    "top-left": "bottom-start",
+    "top-right": "bottom-end",
+    bottom: "top",
+    "bottom-left": "top-start",
+    "bottom-right": "top-end",
+};
+
+export type FloatingTooltipHookArgs = {
+    open?: boolean;
+    hostRef?: React.RefObject<HTMLElement>;
+    options?: FloatingTooltipHookOptions;
+};
+
+export type FloatingTooltipHookOptions = {
+    offset?: number;
+    pointer?: PointerDirection;
+    placement?: Placement;
+    noFlip?: boolean;
+    noShift?: boolean;
+    notInline?: boolean;
+    strategy?: "fixed" | "absolute";
+};
+
+export type FloatingTooltipHookReturn = {
+    overlayStyles: ReturnType<typeof useFloating>["floatingStyles"];
+    arrowStyles: React.CSSProperties;
+    refs: {
+        host: ReturnType<typeof useFloating>["refs"]["reference"];
+        overlay: ReturnType<typeof useFloating>["refs"]["floating"];
+        arrow: React.RefObject<HTMLElement>;
+        setHost: ReturnType<typeof useFloating>["refs"]["setReference"];
+        setOverlay: ReturnType<typeof useFloating>["refs"]["setFloating"];
+    };
+};
+
+export function useFloatingTooltip({ open, hostRef, options }: FloatingTooltipHookArgs): FloatingTooltipHookReturn {
+    const arrowRef = useRef<HTMLElement>(null);
+    const placement = options?.placement ?? POINTER_TO_PLACEMENT[options?.pointer ?? "bottom"];
+
+    const middleware = [
+        offset(options?.offset ?? 6),
+        !options?.notInline && inline(),
+        !options?.noFlip && flip({ fallbackAxisSideDirection: "end", flipAlignment: false }),
+        !options?.noShift && shift(),
+        arrow({ element: arrowRef, padding: 20 }),
+    ].filter(Boolean);
+
+    const {
+        floatingStyles,
+        refs,
+        middlewareData,
+        placement: finalPlacement,
+    } = useFloating({
+        placement,
+        strategy: options?.strategy ?? "absolute",
+        open,
+        middleware,
+        whileElementsMounted: autoUpdate,
+        elements: {
+            reference: hostRef?.current,
+        },
+    });
+
+    const arrowStyles: React.CSSProperties = {};
+    if (middlewareData.arrow) {
+        const { x: arrowX, y: arrowY } = middlewareData.arrow;
+        const staticSide = {
+            top: "bottom",
+            right: "left",
+            bottom: "top",
+            left: "right",
+        }[finalPlacement.split("-")[0]] as "top" | "right" | "bottom" | "left";
+
+        arrowStyles.left = arrowX != null ? `${arrowX}px` : "";
+        arrowStyles.top = arrowY != null ? `${arrowY}px` : "";
+        arrowStyles.right = "";
+        arrowStyles.bottom = "";
+        arrowStyles[staticSide] = "-4px";
+    }
+
+    return {
+        overlayStyles: floatingStyles,
+        arrowStyles,
+        refs: {
+            host: refs.reference,
+            overlay: refs.floating,
+            arrow: arrowRef,
+            setHost: refs.setReference,
+            setOverlay: refs.setFloating,
+        },
+    };
+}
diff --git a/packages/ebayui-core-react/src/common/tooltip-utils/tooltip-content.tsx b/packages/ebayui-core-react/src/common/tooltip-utils/tooltip-content.tsx
@@ -1,7 +1,7 @@
-import React, { FC, CSSProperties, ReactNode } from "react";
+import React, { FC, CSSProperties, ReactNode, RefObject } from "react";
 import { excludeComponent, findComponent } from "../component-utils";
 import { PointerDirection, TooltipType } from "./types";
-import { DEFAULT_POINTER_DIRECTION, POINTER_STYLES, TYPE_ROLES } from "./constants";
+import { DEFAULT_POINTER_DIRECTION, TYPE_ROLES } from "./constants";
 import TooltipCloseButton from "./tooltip-close-button";
 import TooltipFooter from "./tooltip-footer";
 import { EbayIconClose16 } from "../../ebay-icon/icons/ebay-icon-close-16";
@@ -15,6 +15,9 @@ export type TooltipContentProps = {
     a11yCloseText?: string;
     onClose?: () => void;
     children?: ReactNode;
+    overlayRef?: (node: HTMLElement | null) => void;
+    arrowRef?: RefObject<HTMLElement>;
+    arrowStyle?: CSSProperties;
 };
 
 const TooltipContent: FC<TooltipContentProps> = ({
@@ -26,19 +29,17 @@ const TooltipContent: FC<TooltipContentProps> = ({
     showCloseButton,
     a11yCloseText,
     onClose,
+    overlayRef,
+    arrowRef,
+    arrowStyle,
 }) => {
     const closeButton = findComponent(children, TooltipCloseButton);
     const footer = findComponent(children, TooltipFooter);
     const allChildrenExceptFooter = excludeComponent(children, TooltipFooter);
 
     return (
-        <span
-            className={`${type}__overlay`}
-            id={id}
-            role={TYPE_ROLES[type] || null}
-            style={{ ...POINTER_STYLES[pointer], ...style }}
-        >
-            <span className={`${type}__pointer ${type}__pointer--${pointer}`} />
+        <span className={`${type}__overlay`} id={id} role={TYPE_ROLES[type] || null} style={style} ref={overlayRef}>
+            <span className={`${type}__pointer ${type}__pointer--${pointer}`} ref={arrowRef} style={arrowStyle} />
             <span className={`${type}__mask`}>
                 <span className={`${type}__cell`}>
                     <span className={`${type}__content`}>{allChildrenExceptFooter}</span>

diff --git a/packages/ebayui-core-react/src/ebay-infotip/ebay-infotip.tsx b/packages/ebayui-core-react/src/ebay-infotip/ebay-infotip.tsx
@@ -17,6 +17,7 @@ import { Variant } from "./types";
 import { EbayInfotipHeading, EbayInfotipContent } from "./index";
 import { TooltipHostProps } from "../common/tooltip-utils/tooltip-host";
 import { EbayIconInformation16 } from "../ebay-icon/icons/ebay-icon-information-16";
+import { useFloatingTooltip } from "../common/floating-ui";
 
 export type InfotipProps = {
     variant?: Variant;
@@ -25,6 +26,10 @@ export type InfotipProps = {
     initialExpanded?: boolean;
     pointer?: PointerDirection;
     overlayStyle?: CSSProperties;
+    offset?: number;
+    noFlip?: boolean;
+    noShift?: boolean;
+    notInline?: boolean;
     onExpand?: () => void;
     onCollapse?: () => void;
     a11yCloseText: string;
@@ -37,6 +42,10 @@ const EbayInfotip: FC<InfotipProps> = ({
     variant = "default",
     pointer,
     overlayStyle,
+    offset,
+    noFlip,
+    noShift,
+    notInline,
     disabled,
     onExpand,
     onCollapse,
@@ -55,6 +64,18 @@ const EbayInfotip: FC<InfotipProps> = ({
         hostRef: buttonRef,
     });
 
+    const { overlayStyles, arrowStyles, refs } = useFloatingTooltip({
+        open: isExpanded,
+        hostRef: buttonRef,
+        options: {
+            pointer,
+            offset,
+            noFlip,
+            noShift,
+            notInline,
+        },
+    });
+
     const isModal = variant === "modal";
     const containerRef = useRef<FC<TooltipProps>>(null);
     const heading = findComponent(children, EbayInfotipHeading);
@@ -99,11 +120,14 @@ const EbayInfotip: FC<InfotipProps> = ({
                     <TooltipContent
                         {...contentProps}
                         type="infotip"
-                        style={overlayStyle}
+                        style={{ ...overlayStyles, ...overlayStyle }}
                         pointer={pointer}
                         showCloseButton
                         a11yCloseText={a11yCloseText}
                         onClose={collapseTooltip}
+                        overlayRef={refs.setOverlay}
+                        arrowRef={refs.arrow}
+                        arrowStyle={arrowStyles}
                     >
                         {heading}
                         {contentChildren}

diff --git a/packages/ebayui-core-react/src/ebay-tooltip/ebay-tooltip.tsx b/packages/ebayui-core-react/src/ebay-tooltip/ebay-tooltip.tsx
@@ -11,6 +11,7 @@ import {
 import EbayTooltipContent from "./ebay-tooltip-content";
 import EbayTooltipHost from "./ebay-tooltip-host";
 import { handleEscapeKeydown } from "../events";
+import { useFloatingTooltip } from "../common/floating-ui";
 
 // @todo: this type is weird, we should improve it
 type Props = Omit<TooltipProps, "ref"> & {
@@ -19,13 +20,21 @@ type Props = Omit<TooltipProps, "ref"> & {
     onCollapse?: () => void;
     pointer?: PointerDirection;
     overlayStyle?: CSSProperties;
+    offset?: number;
+    noFlip?: boolean;
+    noShift?: boolean;
+    notInline?: boolean;
 };
 
 const EbayTooltip: FC<Props> = ({
     className,
     pointer,
     overlayStyle,
     noHover,
+    offset,
+    noFlip,
+    noShift,
+    notInline,
     onFocus = () => {},
     onBlur = () => {},
     onMouseEnter = () => {},
@@ -35,9 +44,22 @@ const EbayTooltip: FC<Props> = ({
     children,
     ...rest
 }) => {
+    const hostRef = useRef<HTMLElement>(null);
     const { isExpanded, expandTooltip, collapseTooltip } = useTooltip({ onCollapse, onExpand });
     const timeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
 
+    const { overlayStyles, arrowStyles, refs } = useFloatingTooltip({
+        open: isExpanded,
+        hostRef,
+        options: {
+            pointer,
+            offset,
+            noFlip,
+            noShift,
+            notInline,
+        },
+    });
+
     useEffect(() => {
         const handleKeydown = function (event: KeyboardEvent) {
             handleEscapeKeydown(event as unknown as React.KeyboardEvent, collapseTooltip);
@@ -102,8 +124,16 @@ const EbayTooltip: FC<Props> = ({
             onMouseEnter={handleOnMouseEnter}
             onMouseLeave={handleOnMouseLeave}
         >
-            <TooltipHost {...host.props} />
-            <TooltipContent {...content.props} type="tooltip" style={overlayStyle} pointer={pointer} />
+            <TooltipHost {...host.props} forwardedRef={hostRef} />
+            <TooltipContent
+                {...content.props}
+                type="tooltip"
+                style={{ ...overlayStyles, ...overlayStyle }}
+                pointer={pointer}
+                arrowStyle={arrowStyles}
+                overlayRef={refs.setOverlay}
+                arrowRef={refs.arrow}
+            />
         </Tooltip>
     );
 };