TooltipInPortal used inside a microfrontend obtains an unstyled (and unstylable) tooltip content

[rafa-suarez-itx]

Hi,

When you use the TooltipInPortal inside a microfrontend remote, the tooltip was added to the html root level in the shell, and it's impossible to style it from the microfrontend remote.

Would be great to allow the tooltip to be placed where you decide, for example at the microfrontend root level.

I think that can be easily allowed adding an optional property that indicates the place to add the portal.

The following code could be a solution:

from: https://github.com/airbnb/visx/blob/dee0ac097cc3f53f4d81d1d99b736bf0e3c7ac1c/packages/visx-tooltip/src/Portal.tsx#L4-L9

to:

export type PortalProps = {
  /** Optional z-index to set on the Portal. */
  zIndex?: number | string;
  /** Content to render in the Portal. */
  children: NonNullable<React.ReactNode>;
  /** Parent to render the Portal. */
  parent?: React.ReactNode;    // <----------- NEW PROPERTY
};

Also I think this property should have the default value: document.body to maintain the current behaviour and prevent the breaking change.

If you need more information or insights, I'll happy to help you!

Thanks!

[williaster]

Hey @rafa-suarez-itx thanks for checking out visx and opening the issue. There's an open PR for this issue https://github.com/airbnb/visx/pull/1567, it's probably on me to review it as I dropped the ball. But It got far more complex than anticipated because the offset calculation of the tooltip depends on the ref that's used. Would love to land on a simpler implementation if possible.

[rafa-suarez-itx]

Thank you @williaster ! Do you think that we can achieve the simpler implementation?

[rafa-suarez-itx]

Hi @williaster do you have some news here? Thanks!

[williaster]

Sorry I have zero bandwidth to work on this. happy to try and look at a simplified approach if someone is excited to give it a go.