chore[DSTSUP-65]: fix demo and add overlayprovider to tooltip (#3829)

* chore: fix demo and add overlayprovider to tooltip

* Create ten-hats-exercise.md

.changeset/ten-hats-exercise.md

@@ -0,0 +1,6 @@
+---
+"@marigold/docs": patch
+"@marigold/components": patch
+---
+
+chore[DSTSUP-65]: fix demo and add overlayprovider to tooltip

docs/content/components/overlay/tooltip/tooltip-custom.demo.tsx

@@ -1,8 +1,8 @@
 import { Button, Tooltip } from '@marigold/components';
 
 export default () => (
-  <Tooltip.Trigger placement="right">
+  <Tooltip.Trigger>
     <Button>Hover me!</Button>
-    <Tooltip>Tooltip</Tooltip>
+    <Tooltip placement="right">Tooltip</Tooltip>
   </Tooltip.Trigger>
 );

packages/components/src/Tooltip/Tooltip.tsx

@@ -4,6 +4,7 @@ import type RAC from 'react-aria-components';
 
 import { cn, useClassNames } from '@marigold/system';
 
+import { usePortalContainer } from '../Provider';
 import { TooltipTrigger } from './TooltipTrigger';
 
 type RemovedProps = 'className' | 'isOpen' | 'style';
@@ -21,9 +22,14 @@ const _Tooltip = ({ children, variant, size, open, ...rest }: TooltipProps) => {
     isOpen: open,
   };
   const classNames = useClassNames({ component: 'Tooltip', variant, size });
+  const portal = usePortalContainer();
 
   return (
-    <Tooltip {...props} className={cn('group/tooltip', classNames.container)}>
+    <Tooltip
+      {...props}
+      className={cn('group/tooltip', classNames.container)}
+      UNSTABLE_portalContainer={portal as Element}
+    >
       <OverlayArrow className={classNames.arrow}>
         <svg width={8} height={8} viewBox="0 0 8 8">
           <path d="M0 0 L4 4 L8 0" />