[DRAFT] feat: tooltip component

.vscode/settings.json

@@ -2,7 +2,7 @@
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "eslint.validate": ["javascript", "typescript", "svelte"],
   "eslint.enable": true,

package.json

@@ -50,6 +50,7 @@
   "dependencies": {
     "@apollo/client": "^3.7.10",
     "@github/details-dialog-element": "^3.1.3",
+    "@popperjs/core": "^2.11.8",
     "apexcharts": "^3.37.3",
     "dotenv": "^16.0.3",
     "editorjs-html": "^3.4.2",
@@ -63,4 +64,4 @@
     "rollbar": "^2.26.1"
   },
   "type": "module"
-}
+}

src/lib/components/Chart/template.pug

@@ -43,13 +43,32 @@ mixin empty-state-graph
       clipPath(id="clip0_943_8209")
         rect(width="710" height="184" fill="white" transform="matrix(-1 0 0 1 710 0)")
 
+/// todo: implement the tooltip..
+mixin information-circle
+  svg(width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg")
+    circle(cx="12" cy="12" r="10" fill="lightblue")
+    text(
+      x="50%"
+      y="50%"
+      text-anchor="middle"
+      alignment-baseline="central"
+      font-size="14"
+      fill="white"
+    ) i
+
 mixin legend-item(label, value)
   .chart-legend-item.relative.flex.flex-col.items-start.w-full(class="p-2.75")&attributes(attributes)
-    span.text-footnote.text-t3.block= label
-    +if('isLoading')
+    if label === 'FDM'
+      /// todo: correct the tooltip..
+      span.flex.items-center.gap-1
+        span.text-footnote.text-t3.block= label
+        +information-circle
+    else
+      span.text-footnote.text-t3.block= label
+    if 'isLoading'
       span.block.bg-l3.rounded-2sm.h-8.w-32
-      +else
-        span.text-h6-l.font-satoshi(class="xs:text-h6-s")= value
+    else
+      span.text-h6-l.font-satoshi(class="xs:text-h6-s")= value
 
 .chart.relative.w-full.bg-l2.border.border-solid.border-l4.rounded-xl.h-96.flex.justify-between.flex-col(
   class="xs:h-[480px]"

src/lib/components/Tooltip/Tooltip.stories.svelte

@@ -0,0 +1,65 @@
+<script>
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //@ts-nocheck
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  import Context from '../../../stories/Context.svelte';
+  import Tooltip from './index.svelte';
+  import Button from '../Button/index.svelte';
+</script>
+
+<Meta
+  title="Example/Tooltip"
+  component={Tooltip}
+  argTypes={{
+    tip: { control: 'text' },
+    placement: {
+      control: {
+        type: 'select',
+        options: ['top', 'bottom', 'left', 'right'],
+      },
+    },
+    strategy: {
+      control: { type: 'select', options: ['absolute', 'fixed'] },
+    },
+    modifiers: { control: 'object' },
+  }}
+  args={{
+    placement: 'top',
+    strategy: 'absolute',
+  }}
+/>
+
+<Template let:args let:context id="default">
+  <Context {...context.globals}>
+    <Tooltip {...args} let:ref>
+      <button use:ref>Tooltip</button>
+    </Tooltip>
+  </Context>
+</Template>
+
+<Story
+  name="Default with HTML"
+  args={{
+    tip: 'Tooltip',
+    placement: 'top',
+  }}
+  template="default"
+/>
+
+<Template let:args let:context id="svelteComponent">
+  <Context {...context.globals}>
+    <Tooltip {...args} let:ref>
+      <Button class={args.class} forwardAction={ref}>Tooltip</Button>
+    </Tooltip>
+  </Context>
+</Template>
+
+<Story
+  name="Default with Svelte component"
+  args={{
+    tip: 'Tooltip',
+    placement: 'top',
+  }}
+  template="svelteComponent"
+/>

src/lib/components/Tooltip/index.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  /**
+   * A Tooltip Component
+   * @component
+   */
+  import { fade } from 'svelte/transition';
+
+  import type { Placement, PositioningStrategy } from '@popperjs/core';
+
+  import { portal } from '$lib/utils';
+
+  import { createPopperActions } from './tooltip';
+
+  export let tip: string;
+  export let placement: Placement = 'top';
+  export let strategy: PositioningStrategy = 'absolute';
+  export let modifiers: Array<any> = [];
+  export let link: { href: string; text: string } | undefined = undefined;
+
+  let className = '';
+  let isTooltipHovered = false;
+  export { className as class };
+
+  const defaultModifiers = [
+    {
+      name: 'offset',
+      options: {
+        offset: [0, 10],
+      },
+    },
+  ];
+
+  const [popperRef, popperContent] = createPopperActions({
+    modifiers: defaultModifiers,
+  });
+
+  $: popperOptions = {
+    placement,
+    strategy,
+    modifiers: [...defaultModifiers, ...modifiers],
+  };
+
+  async function waitForDelay(delay: number): Promise<void> {
+    return new Promise<void>((resolve) => {
+      setTimeout(() => {
+        resolve();
+      }, delay);
+    });
+  }
+
+  let isShown = false;
+  const onMouseEnter = (ev: Event) => {
+    isShown = true;
+  };
+
+  const onMouseLeave = async (ev: Event) => {
+    await waitForDelay(300);
+    if (!isTooltipHovered) {
+      isShown = false;
+    } else {
+      isShown = true;
+    }
+  };
+
+  const onMouseLeaveTooltip = () => {
+    isTooltipHovered = false;
+    if (!isTooltipHovered) {
+      isShown = false;
+    }
+  };
+
+  const onTooltipHover = () => {
+    isTooltipHovered = true;
+  };
+
+  const handlers = { onMouseEnter, onMouseLeave };
+
+  const handleRef = (node: HTMLElement) => {
+    return popperRef(node, handlers);
+  };
+</script>
+
+<slot ref={handleRef} {isShown} />
+{#if isShown && (tip || $$slots.tip)}
+  <div
+    transition:fade|local={{ duration: 300 }}
+    class="tooltip level1 {className}"
+    id="tooltip"
+    data-placement={placement}
+    use:portal={'#layers'}
+    use:popperContent={popperOptions}
+    role="tooltip"
+    on:mouseenter={onTooltipHover}
+    on:mouseleave={onMouseLeaveTooltip}
+  >
+    <slot name="tip">
+      <!-- This link replacement is done due to an issue with how pug interprets `<` or `>` in strings when using JSX -->
+      {@html tip.replace(
+        '%link%',
+        `<a class='text-brand-50' href='${link?.href}'>${link?.text}</a>`
+      )}
+    </slot>
+    <span class="tooltip-arrow" id="arrow" data-popper-arrow>
+      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="9">
+        <path
+          d="M 0 0 L 0 -2 L 12 -2 L 12 0 L 7.664 6.504 C 6.872 7.691 5.128 7.691 4.336 6.504 Z"
+          fill="currentColor"
+        />
+      </svg>
+    </span>
+  </div>
+{/if}
+
+<style lang="sass" src="./style.sass">
+
+</style>

src/lib/components/Tooltip/style.sass

@@ -0,0 +1,38 @@
+.tooltip
+    padding: calc(#{theme('spacing.6')} - 1px)
+    @apply block z-10 text-p2 text-gray-5 rounded-base-radius normal-case min-w-[250px] max-w-[346px] w-fit
+
+    &-arrow
+        position: absolute
+        height: 9px
+        width: 12px
+        @apply text-gray-70 stroke-gray-40
+
+        svg
+            position: relative
+            display: block
+            transform-origin: 50% 50%
+
+    &[data-placement^='top'] > &-arrow
+        bottom: -9px
+
+        svg
+            transform: rotate(0deg)
+
+    &[data-placement^='bottom'] > &-arrow
+        top: -9px
+
+        svg
+            transform: rotate(180deg)
+
+    &[data-placement^='left'] > &-arrow
+        right: -10.5px
+
+        svg
+            transform: rotate(-90deg)
+
+    &[data-placement^='right'] > &-arrow
+        left: -10.5px
+
+        svg
+            transform: rotate(90deg)