Skip to content

Commit

Permalink
fix(tooltip): Default tooltip portal to document.body at runtime (#76427
Browse files Browse the repository at this point in the history
)

Refs: [JAVASCRIPT-2NAQ](https://sentry.sentry.io/issues/4322983594/)

Sometimes we're seeing `Target container is not a DOM element.`.
Hopefully this change ensures we always have a DOM element.
  • Loading branch information
evanpurkhiser authored Aug 20, 2024
1 parent 8c7b54c commit 9edbb44
Showing 1 changed file with 6 additions and 5 deletions.
11 changes: 6 additions & 5 deletions static/app/components/tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,10 @@ interface TooltipContextProps {
* This is particularly useful for making the tooltip interactive within specific contexts,
* such as inside a modal. By default the tooltip is rendered in the 'document.body'.
*/
container: Parameters<typeof createPortal>[1];
container: Element | DocumentFragment | null;
}

export const TooltipContext = createContext<TooltipContextProps>({
container: document.body,
});
export const TooltipContext = createContext<TooltipContextProps>({container: null});

interface TooltipProps extends UseHoverOverlayProps {
/**
Expand Down Expand Up @@ -79,7 +77,10 @@ function Tooltip({
return (
<Fragment>
{wrapTrigger(children)}
{createPortal(<AnimatePresence>{tooltipContent}</AnimatePresence>, container)}
{createPortal(
<AnimatePresence>{tooltipContent}</AnimatePresence>,
container ?? document.body
)}
</Fragment>
);
}
Expand Down

0 comments on commit 9edbb44

Please sign in to comment.