feat(tooltip): Enable custom portal container for tooltip

[fbouquet]

:rocket: Enhancements

• Enables setting a custom container for the tooltip portal when using useTooltipInPortal, via the portalContainer property.

Currently, when using useTooltipInPortal, the tooltip renders at the root of the document. My team is running into an issue where we are sometimes rendering a dropdown in a static tooltip, but the dropdown menu appears behind the tooltip. Setting hacky z indexes would not robustly fix the issue if there is another overlay layer that is supposed to be under the tooltip, and we figured that if we could tell the tooltip portal where to render, we could fix the bug in a clean way.

I've updated the tooltip example to show that use case:

https://user-images.githubusercontent.com/6173255/190206148-c73b224d-9937-4c33-af4d-9779ca4a8fa3.mov

https://user-images.githubusercontent.com/6173255/190206164-970cc2c9-01dd-4d72-984a-1b34b3b6cddc.mov

[williaster]

happo diff looks good (sorry this isn't visible to contributors)

[fbouquet]

Thanks a lot for the quick code review @williaster !

I went ahead and updated the code based on your comments. I'll be away from keyboard for the next two weeks but if there's anything else that need to be changed I'll be happy to look into it when I'm back.

[fbouquet]

Hi @williaster ! Just wanted to double check if there's anything else needed from me on this PR or if it's all good to go?

[fbouquet]

Hey @fbouquet thanks again for the addition and your patience getting this in. I have one big concern with this as it stands.

Hi @williaster ! Thank you, those are good points, I'll be looking into this within the next 2 weeks and will get back to you. 🙂

[fbouquet]

@williaster Apologies for the additional delay on this, the last few weeks have been busier than I had expected. I went ahead and updated my code to correctly handle container changes in position and size, and I also fixed the TooltipWithBounds case when a custom portal is specified.

Unfortunately that behavior is hard to cover in automated tests but I was able to manually ensure that things are working well with my changes, as you can see in the screen recording above. 🙂

[fbouquet]

Hi @williaster ! 👋 Just wanted to send you a reminder about this PR; anything I should change before it's ready to go?

[fbouquet]

Thank you for the code review @williaster and apologies for the long delay of my response, the end of year has been pretty busy. I'll be dealing with your comments in the near future and will ping you when it's ready for another round. 🙂

[williaster]

Sounds great @fbouquet ! Will keep an eye out for your ping when you have time 👍

[fbouquet]

@williaster I requested a new review last week but just realized I didn't ping you, so I'm doing that now to make sure that you see the notification. No big rush though!

[fbouquet]

@williaster Just a reminder about this PR for whenever you get a chance to look into it. 🙂

[TSIA-SN]

Ran into an issue today with tooltips in portals due to the fact that we're using Tailwind with the important config option set to the __next div, so TooltipInPortal is unable to be styled by Tailwind due to the fact that the portal is rendering in the root of the DOM. Would love to simply be able to specify a selector for the hook to use in the Portal, similar to what's done here: https://github.com/vercel/next.js/blob/canary/examples/with-portals/components/ClientOnlyPortal.js. Came across this PR, looks like it's been stale for a while though, any plans for it to be merged soon or was it handled by a different update since the last comment?