feat(Tooltip): use popover API

apps/_components/src/Showcase/Showcase.tsx

@@ -69,7 +69,7 @@ export function Showcase({ className, ...props }: ShowcaseProps) {
           placeholder='[email protected]'
           className={classes.userField}
         />
-        <Tooltip content='Trykk for å få hjelp' portal={false}>
+        <Tooltip content='Trykk for å få hjelp'>
           <Link href='#' className={classes.userLink}>
             Glemt passord?
           </Link>

packages/css/src/tooltip.css

@@ -4,13 +4,25 @@
   --dsc-tooltip-border-radius: var(--ds-border-radius-default);
   --dsc-tooltip-padding: var(--ds-spacing-1) var(--ds-spacing-2);
   --dsc-tooltip-arrow-size: var(--ds-spacing-2);
+  --dsc-tooltip-transition-duration: 0.2s;
+  --dsc-tooltip-transition-delay: 150ms;
 
+  position: fixed;
   background: var(--dsc-tooltip-background);
   border-radius: var(--dsc-tooltip-border-radius);
   box-sizing: border-box;
+  border: none;
+  border-width: 0;
   color: var(--dsc-tooltip-color);
   line-height: var(--ds-line-height-sm);
   padding: var(--dsc-tooltip-padding);
+  overflow: visible;
+  margin: 0; /* Needed to place tooltip correctly, since popover adds margin */
+  transition-property: opacity;
+  transition-delay: var(--dsc-tooltip-transition-delay);
+  transition-duration: var(--dsc-tooltip-transition-duration);
+  transition-timing-function: ease-in-out;
+  opacity: 0;
 
   &::before {
     content: '';
@@ -19,11 +31,12 @@
     height: var(--dsc-tooltip-arrow-size);
     width: var(--dsc-tooltip-arrow-size);
     position: absolute;
-    left: var(--ds-tooltip-arrow-x);
-    top: var(--ds-tooltip-arrow-y);
+    left: var(--dsc-tooltip-arrow-x);
+    top: var(--dsc-tooltip-arrow-y);
     translate: -50% -50%;
     rotate: 45deg;
   }
+
   @media (forced-colors: active) {
     --dsc-tooltip-background: CanvasText;
   }

packages/react/src/components/Tooltip/Tooltip.mdx

@@ -40,20 +40,7 @@ Vurder om `tooltip` skal plasseres over, under eller ved siden av elementet.
 
 <Canvas of={TooltipStories.Placement} />
 
-### Åpen som standard
-
-<Canvas of={TooltipStories.DefaultOpen} />
-
-### Portal
-
-<Canvas of={TooltipStories.Portal} />
-
-### Fargevarianter
-
-`Tooltip` har to fargevarianter i `neutral`, tilpasset `light` og `dark` modus.
-
-<br/ >
-### CSS Variabler
+## CSS Variabler
 
 <CssVariables css={css} />
 <br/ >

packages/react/src/components/Tooltip/Tooltip.stories.tsx

@@ -16,7 +16,7 @@ export default {
 } satisfies Meta;
 
 export const Preview: StoryFn<typeof Tooltip> = (args) => (
-  <Tooltip {...args}>
+  <Tooltip {...args} id='my-tooltip'>
     <Button>My trigger</Button>
   </Tooltip>
 );
@@ -40,24 +40,3 @@ export const Placement: Story = {
     children: defaultChildren,
   },
 };
-
-export const DefaultOpen: Story = {
-  args: {
-    content: 'Tooltip text',
-    defaultOpen: true,
-    children: defaultChildren,
-  },
-  play: async () => {
-    // Wait 500 ms to let tooltip fade in before running tests
-    await new Promise((resolve) => setTimeout(resolve, 500));
-  },
-};
-
-export const Portal: Story = {
-  args: {
-    content: 'Tooltip text',
-    children: defaultChildren,
-    placement: 'top',
-    portal: true,
-  },
-};

packages/react/src/components/Tooltip/Tooltip.test.tsx

@@ -9,7 +9,6 @@ const render = async (props: Partial<TooltipProps> = {}) => {
   const allProps: TooltipProps = {
     children: <button>My button</button>,
     content: 'Tooltip text',
-    delay: 0,
     ...props,
   };
   /* Flush microtasks */
@@ -18,78 +17,63 @@ const render = async (props: Partial<TooltipProps> = {}) => {
 
   return {
     user,
-    ...renderRtl(<Tooltip {...allProps} />),
+    ...renderRtl(
+      <Tooltip
+        {...allProps}
+        style={{
+          //  @ts-ignore react does not want us to set css vars here
+          '--dsc-tooltip-transition-duration': '0s',
+        }}
+      />,
+    ),
   };
 };
 
 describe('Tooltip', () => {
-  describe('should render children', () => {
-    it('should render child', async () => {
-      await render();
-      const tooltipTrigger = screen.getByRole('button', { name: 'My button' });
+  it('should render child', async () => {
+    await render();
+    const tooltipTrigger = screen.getByRole('button', { name: 'My button' });
 
-      expect(tooltipTrigger).toBeInTheDocument();
-    });
+    expect(tooltipTrigger).toBeInTheDocument();
   });
 
-  describe('should render tooltip', () => {
-    it('should render tooltip on hover', async () => {
-      const { user } = await render();
-      const tooltipTrigger = screen.getByRole('button', { name: 'My button' });
-
-      expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  it('should render tooltip on hover', async () => {
+    const { user } = await render();
+    const tooltipTrigger = screen.getByRole('button');
 
-      await act(async () => await user.hover(tooltipTrigger));
+    expect(screen.getByText('Tooltip text')).not.toBeVisible();
 
-      const tooltip = await screen.findByText('Tooltip text');
-      expect(tooltip).toBeInTheDocument();
-      expect(screen.queryByRole('tooltip')).toBeInTheDocument();
-    });
+    await act(async () => await user.hover(tooltipTrigger));
 
-    it('should render tooltip on focus', async () => {
-      const { user } = await render();
+    const tooltip = await screen.findByText('Tooltip text');
+    expect(tooltip).toBeVisible();
+    expect(screen.getByText('Tooltip text')).toBeVisible();
+  });
 
-      expect(screen.queryByText('Tooltip text')).not.toBeInTheDocument();
-      await user.click(screen.getByRole('button', { name: 'My button' }));
-      const tooltip = await screen.findByText('Tooltip text');
-      expect(tooltip).toBeInTheDocument();
-      expect(screen.queryByRole('tooltip')).toBeInTheDocument();
-    });
+  it('should render tooltip on focus', async () => {
+    const { user } = await render();
 
-    it('should close tooltip on escape', async () => {
-      const { user } = await render();
-      const tooltipTrigger = screen.getByRole('button', { name: 'My button' });
-
-      expect(screen.queryByText('Tooltip text')).not.toBeInTheDocument();
-      await act(async () => {
-        await user.hover(tooltipTrigger);
-      });
-      const tooltip = await screen.findByText('Tooltip text');
-      expect(tooltip).toBeInTheDocument();
-      await act(async () => {
-        await user.keyboard('[Escape]');
-      });
-      expect(screen.queryByText('Tooltip text')).not.toBeInTheDocument();
-    });
+    expect(screen.queryByText('Tooltip text')).not.toBeVisible();
+    await user.click(screen.getByRole('button', { name: 'My button' }));
+    const tooltip = await screen.findByText('Tooltip text');
+    expect(tooltip).toBeInTheDocument();
+    expect(screen.queryByRole('tooltip')).toBeVisible();
   });
 
   it('should render open when we pass open prop', async () => {
     await render({ open: true });
-    const tooltipTrigger = screen.getByRole('button', { name: 'My button' });
 
-    expect(screen.getByRole('tooltip')).toBeInTheDocument();
-    expect(tooltipTrigger).toHaveAttribute('aria-describedby');
+    expect(screen.getByRole('tooltip')).toBeVisible();
   });
 
-  it('should have delay', async () => {
-    const { user } = await render({ delay: 300 });
-
-    await act(async () => await user.hover(screen.getByRole('button')));
-    expect(screen.queryByRole('tooltip')).toBeNull();
-
-    await vi.waitFor(() => {
-      expect(screen.queryByRole('tooltip')).toBeVisible();
+  it('should have correct id and popovertarget attributes', async () => {
+    await render({
+      id: 'my-tooltip',
     });
+    const trigger = screen.getByRole('button');
+    const popover = screen.getByText('Tooltip text');
+
+    expect(trigger.getAttribute('popovertarget')).toBe(popover.id);
   });
 
   it('should render span when children is a string', async () => {