Merge pull request #390 from appwrite/fix-tooltip

Author: ItzNotABug

v2/pink-sb/src/lib/Popover.svelte

@@ -11,6 +11,7 @@
 
     const activeInstance = activePopover.get();
     const inDialogGroup = hasContext('dialog-group');
+    const inTooltipGroup = hasContext('tooltip-group');
 
     let id = 'popover-' + Math.random().toString(36).substring(2, 9);
     let referenceElement: HTMLSpanElement;
@@ -82,7 +83,7 @@
     }
 
     function portalPopover(node: HTMLElement) {
-        if (!portal && !inDialogGroup) return;
+        if (!portal && !inDialogGroup && !inTooltipGroup) return;
 
         const target = !inDialogGroup
             ? document.body

v2/pink-sb/src/lib/Tooltip.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { tick, hasContext } from 'svelte';
     import type { Placement } from '@floating-ui/dom';
+    import { tick, hasContext, setContext } from 'svelte';
     import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
 
     export let portal: boolean = false;
@@ -19,6 +19,8 @@
     let referenceElement: HTMLSpanElement;
     const id = 'tooltip-' + Math.random().toString(36).substring(2, 9);
 
+    setContext('tooltip-group', true);
+
     const inDialogGroup = hasContext('dialog-group');
 
     // hide tooltip if disabled becomes true
@@ -56,11 +58,18 @@
     async function update() {
         if (!referenceElement || !tooltipElement) return;
 
-        const firstChild = referenceElement.firstElementChild;
+        let firstChild = referenceElement.firstElementChild;
         if (!(firstChild instanceof HTMLElement)) {
             return;
         }
 
+        // If element has no bounding box like
+        // display: contents, then use its child!
+        const rect = firstChild.getBoundingClientRect();
+        if (rect.width === 0 && rect.height === 0 && firstChild.firstElementChild) {
+            firstChild = firstChild.firstElementChild as HTMLElement;
+        }
+
         const { x, y } = await computePosition(firstChild, tooltipElement, {
             placement,
             middleware: [offset(offsetAmount), flip(), shift()]

v2/pink-sb/src/stories/Tooltip.stories.svelte

@@ -19,6 +19,7 @@
 </script>
 
 <script>
+    import Popover from '$lib/Popover.svelte';
     import { Button } from '$lib/button/index.js';
     import { Story, Template } from '@storybook/addon-svelte-csf';
     let toggle = true;
@@ -36,10 +37,28 @@
 <Story name="Default" />
 <Story name="Hover" {play} />
 
+<Story name="With Popover">
+    <div class="container-extended">
+        <Tooltip>
+            <Popover let:toggle>
+                <Button on:click={toggle}>Click me</Button>
+                <div slot="tooltip">Popover content here</div>
+            </Popover>
+            <p slot="tooltip">Open menu</p>
+        </Tooltip>
+    </div>
+</Story>
+
 <style>
     .container {
         margin: 12rem auto;
         display: grid;
         place-content: center;
     }
+    .container-extended {
+        display: flex;
+        height: 100vh;
+        align-items: center;
+        justify-content: center;
+    }
 </style>