Repository: equinor/design-system (ts)

Issue:
Tooltip is displayed underneath Autocomplete
**Describe the bug**
In our application we have some Autocomplete components with custom option components that show additional information in tooltips when hovering an icon. Previously this worked by changing the `z-index` of the tooltips to ensure they displayed above the Autocomplete modal. After the change which moves the Autocomplete to the top layer with the native popover API this does not work anymore and tooltips are displayed underneath the Autocomplete.
![image](https://github.com/user-attachments/assets/d3b01b18-39cd-4e99-a317-e93278b98e2c)

**Steps to reproduce the bug**

1. Go to [codesandbox example](https://codesandbox.io/p/sandbox/eds-autocomplete-with-tooltips-fzr5yc?file=%2Fsrc%2FApp.tsx%3A15%2C42)
2. Click Autocomplete to open it
3. Hover over info icons
4. See that tooltips are displayed underneath autocomplete

**Expected behavior**

Tooltips should display on top of Autocomplete modal (at least when Tooltip is inside Autocomplete).
Is it possible to move Tooltips to the top layer as well?

**Specifications**

- Version: 0.40.1
- Browser: Chrome
- OS: Windows

**Additional context**
https://codesandbox.io/p/sandbox/eds-autocomplete-with-tooltips-fzr5yc?file=%2Fsrc%2FApp.tsx%3A15%2C42


Pull request:
💄 Tooltip: implement [popover]
resolves #3567 

Patch:
diff --git a/packages/eds-core-react/src/components/Dialog/Dialog.stories.tsx b/packages/eds-core-react/src/components/Dialog/Dialog.stories.tsx
index 0b4aa9ec..98242227 100644
--- a/packages/eds-core-react/src/components/Dialog/Dialog.stories.tsx
+++ b/packages/eds-core-react/src/components/Dialog/Dialog.stories.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useArgs } from '@storybook/preview-api'
-import { Dialog, DialogProps, Button, Radio, Typography } from '../..'
+import { Dialog, DialogProps, Button, Radio, Typography, Tooltip } from '../..'
 import styled from 'styled-components'
 import { StoryFn, Meta } from '@storybook/react'
 import { Stack } from './../../../.storybook/components'
@@ -121,7 +121,9 @@ export const Dismissable: StoryFn<DialogProps> = () => {
         </Dialog.CustomContent>
         <Dialog.Actions>
           <Wrapper>
-            <Button onClick={handleClose}>OK</Button>
+            <Tooltip title="A tooltip inside dialog" placement="top">
+              <Button onClick={handleClose}>OK</Button>
+            </Tooltip>
             <Button variant="ghost" onClick={handleClose}>
               Cancel
             </Button>
diff --git a/packages/eds-core-react/src/components/Tooltip/Tooltip.stories.tsx b/packages/eds-core-react/src/components/Tooltip/Tooltip.stories.tsx
index 82e8206d..c6b5b5ba 100644
--- a/packages/eds-core-react/src/components/Tooltip/Tooltip.stories.tsx
+++ b/packages/eds-core-react/src/components/Tooltip/Tooltip.stories.tsx
@@ -160,10 +160,10 @@ export const TooltipOnButton: StoryFn<TooltipProps> = () => (
     <Tooltip title="This is what a tooltip looks like">
       <Button>Hover me</Button>
     </Tooltip>
-    <Tooltip title="This tooltip only shows for people using firefox and using mouse. Don't do this!">
+    <Tooltip title="This tooltip only shows for people using mouse. Don't do this!">
       <Button disabled>Disabled button</Button>
     </Tooltip>
-    <Tooltip title="Tooltip works in all browsers and with keyboard navigation when using aria-disabled">
+    <Tooltip title="Tooltip works with keyboard navigation when using aria-disabled">
       <Button aria-disabled>Aria-disabled button</Button>
     </Tooltip>
   </>
diff --git a/packages/eds-core-react/src/components/Tooltip/Tooltip.tsx b/packages/eds-core-react/src/components/Tooltip/Tooltip.tsx
index c1787de2..31ae90a0 100644
--- a/packages/eds-core-react/src/components/Tooltip/Tooltip.tsx
+++ b/packages/eds-core-react/src/components/Tooltip/Tooltip.tsx
@@ -14,7 +14,7 @@ import {
   typographyTemplate,
   bordersTemplate,
   mergeRefs,
-  useIsInDialog,
+  useIsomorphicLayoutEffect,
 } from '@equinor/eds-utils'
 import { tooltip as tokens } from './Tooltip.tokens'
 import {
@@ -30,18 +30,19 @@ import {
   useFocus,
   useRole,
   useDismiss,
-  FloatingPortal,
 } from '@floating-ui/react'
 
-const StyledTooltip = styled.div`
+const StyledTooltip = styled('div').withConfig({
+  shouldForwardProp: () => true, //workaround to avoid warning until popover gets added to react types
+})<{ popover: string }>`
+  inset: unset;
+  border: 0;
+  overflow: visible;
   ${typographyTemplate(tokens.typography)}
   ${spacingsTemplate(tokens.spacings)}
   ${bordersTemplate(tokens.border)}
-
   background: ${tokens.background};
-  z-index: 1500;
   white-space: nowrap;
-
   &::before {
     content: '; Has tooltip: ';
     clip-path: inset(50%);
@@ -52,6 +53,9 @@ const StyledTooltip = styled.div`
     padding: 0;
     position: absolute;
   }
+  &::backdrop {
+    background-color: transparent;
+  }
 `
 
 const ArrowWrapper = styled.div`
@@ -171,11 +175,15 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
       }),
     })
 
-    //temporary fix for tooltip inside dialog. Should be replaced by popover api when it is ready
-    const inDialog = useIsInDialog(refs.domReference.current)
+    useIsomorphicLayoutEffect(() => {
+      if (shouldOpen && open) {
+        refs.floating.current?.showPopover()
+      }
+    }, [open, shouldOpen, refs.floating])
 
     const TooltipEl = (
       <StyledTooltip
+        popover="manual"
         {...rest}
         {...getFloatingProps({
           ref: tooltipRef,
@@ -198,13 +206,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
 
     return (
       <>
-        {inDialog ? (
-          <>{shouldOpen && open && TooltipEl}</>
-        ) : (
-          <FloatingPortal id="eds-tooltip-container">
-            {shouldOpen && open && TooltipEl}
-          </FloatingPortal>
-        )}
+        {shouldOpen && open && TooltipEl}
         {updatedChildren}
       </>
     )


Test patch:
diff --git a/packages/eds-core-react/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/packages/eds-core-react/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
index 0b0cf345..dc4591c6 100644
--- a/packages/eds-core-react/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
+++ b/packages/eds-core-react/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
@@ -2,6 +2,9 @@
 
 exports[`Tooltip Matches snapshot 1`] = `
 .c0 {
+  inset: unset;
+  border: 0;
+  overflow: visible;
   margin: 0;
   color: var(--eds_text__static_icons__primary_white, rgba(255, 255, 255, 1));
   font-family: Equinor;
@@ -15,7 +18,6 @@ exports[`Tooltip Matches snapshot 1`] = `
   padding-bottom: 8px;
   border-radius: 4px;
   background: var(--eds_ui_background__overlay, rgba(0, 0, 0, 0.8));
-  z-index: 1500;
   white-space: nowrap;
 }
 
@@ -30,6 +32,10 @@ exports[`Tooltip Matches snapshot 1`] = `
   position: absolute;
 }
 
+.c0::backdrop {
+  background-color: transparent;
+}
+
 .c1 {
   position: absolute;
   width: 6px;
@@ -47,6 +53,7 @@ exports[`Tooltip Matches snapshot 1`] = `
 <div
   class="c0"
   id=":r0:"
+  popover="manual"
   role="tooltip"
   style="position: absolute; top: 14px; left: 8px;"
   tabindex="-1"