diff --git a/packages/react/src/components/Tooltip/Tooltip.tsx b/packages/react/src/components/Tooltip/Tooltip.tsx index 08f86e7b3a..35ab3077e3 100644 --- a/packages/react/src/components/Tooltip/Tooltip.tsx +++ b/packages/react/src/components/Tooltip/Tooltip.tsx @@ -20,8 +20,6 @@ import { FloatingPortal, } from '@floating-ui/react'; -import type { PortalProps } from '../../types/Portal'; - const ARROW_HEIGHT = 7; const ARROW_GAP = 4; @@ -50,8 +48,13 @@ export type TooltipProps = { defaultOpen?: boolean; /** Inverts the color of the tooltip. Use this on dark backgrounds. */ inverted?: boolean; -} & PortalProps & - HTMLAttributes; + /** + * Portals the floating element outside of the app root and into the body. + * @see https://floating-ui.com/docs/floatingportal + * @default true + */ + portal?: boolean; +} & HTMLAttributes; export const Tooltip = forwardRef( ( @@ -62,7 +65,7 @@ export const Tooltip = forwardRef( delay = 150, open: userOpen, defaultOpen = false, - portal, + portal = true, inverted, className, style, @@ -136,32 +139,30 @@ export const Tooltip = forwardRef( }), )} {internalOpen && ( - - -
- {content} - -
-
-
+ +
+ {content} + +
+
)} );