feat(tooltip): implement tooltip to beta phase

qwikifiers · Jul 13, 2024 · dd22ec2 · dd22ec2
1 parent 79d3b31
commit dd22ec2
Show file tree

Hide file tree

Showing 30 changed files with 1,184 additions and 60 deletions.
diff --git a/README.md b/README.md
@@ -56,7 +56,7 @@ npm install -D @qwik-ui/headless
 | [Separator](https://qwikui.com/docs/headless/separator)   |         |               | ✅   |        |
 | [Tabs](https://qwikui.com/docs/headless/tabs)             |         |               | ✅   |        |
 | [Toggle](https://qwikui.com/docs/headless/toggle)         |   ✅    |               |      |        |
-| [Tooltip](https://qwikui.com/docs/headless/tooltip)       |         |      ✅       |      |        |
+| [Tooltip](https://qwikui.com/docs/headless/tooltip)       |         |               | ✅   |        |
 
 ## Contributing
 

diff --git a/apps/website/src/_state/component-statuses.ts b/apps/website/src/_state/component-statuses.ts
@@ -48,6 +48,6 @@ export const statusByComponent: ComponentKitsStatuses = {
     Select: ComponentStatus.Beta,
     Separator: ComponentStatus.Beta,
     Tabs: ComponentStatus.Beta,
-    Tooltip: ComponentStatus.Draft,
+    Tooltip: ComponentStatus.Beta,
   },
 };
diff --git a/apps/website/src/components/showcase/showcase.tsx b/apps/website/src/components/showcase/showcase.tsx
@@ -19,13 +19,18 @@ export const Showcase = component$<ShowcaseProps>(({ name, ...props }) => {
   const componentCodeSig = useSignal<string>();
 
   useTask$(async () => {
-    // eslint-disable-next-line qwik/valid-lexical-scope
-    MetaGlobComponentSig.value = isDev
-      ? await metaGlobComponents[componentPath]() // We need to call `await metaGlobComponents[componentPath]()` in development as it is `eager:false`
-      : metaGlobComponents[componentPath]; // We need to directly access the `metaGlobComponents[componentPath]` expression in preview/production as it is `eager:true`
-    componentCodeSig.value = isDev
-      ? await rawComponents[componentPath]()
-      : rawComponents[componentPath];
+    try {
+      // eslint-disable-next-line qwik/valid-lexical-scope
+      MetaGlobComponentSig.value = isDev
+        ? await metaGlobComponents[componentPath]() // We need to call `await metaGlobComponents[componentPath]()` in development as it is `eager:false`
+        : metaGlobComponents[componentPath]; // We need to directly access the `metaGlobComponents[componentPath]` expression in preview/production as it is `eager:true`
+      componentCodeSig.value = isDev
+        ? await rawComponents[componentPath]()
+        : rawComponents[componentPath];
+    } catch (e) {
+      console.error('Unable to load path %s', componentPath, e);
+      throw e;
+    }
   });
 
   return (

diff --git a/apps/website/src/routes/docs/headless/tooltip/examples/animation.tsx b/apps/website/src/routes/docs/headless/tooltip/examples/animation.tsx
@@ -0,0 +1,13 @@
+import { component$ } from '@builder.io/qwik';
+import { Tooltip } from '@qwik-ui/headless';
+
+export default component$(() => {
+  return (
+    <Tooltip.Root gutter={4} flip>
+      <Tooltip.Trigger>Hover or Focus me</Tooltip.Trigger>
+      <Tooltip.Panel class="tooltip-animation">
+        Animated tooltip content here
+      </Tooltip.Panel>
+    </Tooltip.Root>
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/tooltip/examples/arrow-styling.tsx b/apps/website/src/routes/docs/headless/tooltip/examples/arrow-styling.tsx
@@ -0,0 +1,58 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import { Tooltip } from '@qwik-ui/headless';
+
+export default component$(() => {
+  useStyles$(`
+    .tooltip-panel {
+      background-color: #222;
+      color: #fff;
+      padding: 15px;
+      border-radius: 8px;
+      position: relative;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+      transition: opacity 0.3s ease;
+      opacity: 0;
+    }
+
+    .tooltip-panel[data-state="open"] {
+      opacity: 1;
+    }
+
+    .tooltip-arrow {
+      position: absolute;
+      width: 20px;
+      height: 10px;
+      overflow: hidden;
+    }
+
+    .tooltip-arrow::before {
+      content: '';
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      background-color: #222;
+      top: -5px;
+      left: calc(50% - 5px);
+      transform: rotate(45deg);
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      transition: top 0.3s ease;
+    }
+
+    .tooltip-panel[data-state="open"] .tooltip-arrow::before {
+      top: -8px;
+    }
+  `);
+
+  return (
+    <Tooltip.Root gutter={4} flip>
+      <Tooltip.Trigger>Hover or Focus me</Tooltip.Trigger>
+      <Tooltip.Panel aria-label="Tooltip content" class="tooltip-panel">
+        <Tooltip.Arrow class="tooltip-arrow" width={20} height={10} />
+        <div>
+          <h3 style="margin: 0 0 10px;">Tooltip Title</h3>
+          <p style="margin: 0;">This tooltip has a snazzy styled arrow!</p>
+        </div>
+      </Tooltip.Panel>
+    </Tooltip.Root>
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/tooltip/examples/auto.tsx b/apps/website/src/routes/docs/headless/tooltip/examples/auto.tsx
@@ -0,0 +1,11 @@
+import { component$ } from '@builder.io/qwik';
+import { Tooltip } from '@qwik-ui/headless';
+
+export default component$(() => {
+  return (
+    <Tooltip.Root gutter={4} flip>
+      <Tooltip.Trigger>Hover or Focus me</Tooltip.Trigger>
+      <Tooltip.Panel class="tooltip-panel">Tooltip content here</Tooltip.Panel>
+    </Tooltip.Root>
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/tooltip/examples/basic.tsx b/apps/website/src/routes/docs/headless/tooltip/examples/basic.tsx
@@ -0,0 +1,14 @@
+import { component$ } from '@builder.io/qwik';
+import { Tooltip } from '@qwik-ui/headless';
+
+export default component$(() => {
+  return (
+    <Tooltip.Root gutter={4} flip>
+      <Tooltip.Trigger>Hover or Focus me</Tooltip.Trigger>
+      <Tooltip.Panel aria-label="Tooltip content">
+        <Tooltip.Arrow width={10} height={5} />
+        Tooltip content here
+      </Tooltip.Panel>
+    </Tooltip.Root>
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/tooltip/examples/complex.tsx b/apps/website/src/routes/docs/headless/tooltip/examples/complex.tsx
@@ -0,0 +1,22 @@
+import { component$ } from '@builder.io/qwik';
+import { Tooltip } from '@qwik-ui/headless';
+
+export default component$(() => {
+  return (
+    <Tooltip.Root gutter={4} flip placement="bottom">
+      <Tooltip.Trigger>Hover or Focus me</Tooltip.Trigger>
+      <Tooltip.Panel aria-label="Complex Tooltip content">
+        <Tooltip.Arrow width={10} height={5} />
+        <div>
+          <h3>Tooltip Title</h3>
+          <p>This is a tooltip with complex HTML content, including:</p>
+          <ul>
+            <li>List item 1</li>
+            <li>List item 2</li>
+            <li>List item 3</li>
+          </ul>
+        </div>
+      </Tooltip.Panel>
+    </Tooltip.Root>
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/tooltip/examples/flip.tsx b/apps/website/src/routes/docs/headless/tooltip/examples/flip.tsx
@@ -0,0 +1,13 @@
+import { component$ } from '@builder.io/qwik';
+import { Tooltip } from '@qwik-ui/headless';
+
+export default component$(() => {
+  return (
+    <Tooltip.Root gutter={4} flip>
+      <Tooltip.Trigger>Hover or Focus me</Tooltip.Trigger>
+      <Tooltip.Panel class="tooltip-panel">
+        Tooltip content with flip enabled
+      </Tooltip.Panel>
+    </Tooltip.Root>
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/tooltip/examples/floating.tsx b/apps/website/src/routes/docs/headless/tooltip/examples/floating.tsx
@@ -0,0 +1,11 @@
+import { component$ } from '@builder.io/qwik';
+import { Tooltip } from '@qwik-ui/headless';
+
+export default component$(() => {
+  return (
+    <Tooltip.Root gutter={4} flip>
+      <Tooltip.Trigger>Hover or Focus me</Tooltip.Trigger>
+      <Tooltip.Panel class="tooltip-panel">Floating Tooltip content here</Tooltip.Panel>
+    </Tooltip.Root>
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/tooltip/examples/gutter.tsx b/apps/website/src/routes/docs/headless/tooltip/examples/gutter.tsx
@@ -0,0 +1,11 @@
+import { component$ } from '@builder.io/qwik';
+import { Tooltip } from '@qwik-ui/headless';
+
+export default component$(() => {
+  return (
+    <Tooltip.Root gutter={20} flip>
+      <Tooltip.Trigger>Hover or Focus me</Tooltip.Trigger>
+      <Tooltip.Panel class="tooltip-panel">Tooltip content with gutter</Tooltip.Panel>
+    </Tooltip.Root>
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/tooltip/examples/hero.tsx b/apps/website/src/routes/docs/headless/tooltip/examples/hero.tsx
@@ -1,16 +1,11 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
+import { component$ } from '@builder.io/qwik';
 import { Tooltip } from '@qwik-ui/headless';
 
 export default component$(() => {
-  useStyles$(styles);
-
   return (
-    <Tooltip.Root>
-      <Tooltip.Trigger class="tooltip-trigger">Hover over me</Tooltip.Trigger>
-      <Tooltip.Content class="tooltip-content">I'm a tooltip!</Tooltip.Content>
+    <Tooltip.Root gutter={4} flip>
+      <Tooltip.Trigger>Hover or Focus me</Tooltip.Trigger>
+      <Tooltip.Panel class="tooltip-panel">Tooltip content here</Tooltip.Panel>
     </Tooltip.Root>
   );
 });
-
-// internal
-import styles from '../snippets/tooltip.css?inline';
diff --git a/apps/website/src/routes/docs/headless/tooltip/examples/placement.tsx b/apps/website/src/routes/docs/headless/tooltip/examples/placement.tsx
@@ -0,0 +1,38 @@
+import { component$, useSignal } from '@builder.io/qwik';
+import { Tooltip } from '@qwik-ui/headless';
+
+export default component$(() => {
+  const placement = useSignal<'top' | 'right' | 'bottom' | 'left'>('top');
+
+  return (
+    <div>
+      <label for="placement">Select Tooltip Placement: </label>
+      <select
+        id="placement"
+        value={placement.value}
+        onChange$={(e) =>
+          (placement.value = (e.target as HTMLSelectElement).value as
+            | 'top'
+            | 'right'
+            | 'bottom'
+            | 'left')
+        }
+      >
+        <option value="top">Top</option>
+        <option value="right">Right</option>
+        <option value="bottom">Bottom</option>
+        <option value="left">Left</option>
+      </select>
+
+      <Tooltip.Root gutter={4} flip placement={placement.value}>
+        <Tooltip.Trigger>Hover or Focus me</Tooltip.Trigger>
+        <Tooltip.Panel
+          aria-label={`Tooltip content on the ${placement.value}`}
+          class="tooltip-panel"
+        >
+          Tooltip content on the {placement.value}
+        </Tooltip.Panel>
+      </Tooltip.Root>
+    </div>
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/tooltip/examples/styling.tsx b/apps/website/src/routes/docs/headless/tooltip/examples/styling.tsx
@@ -0,0 +1,12 @@
+import { component$ } from '@builder.io/qwik';
+import { Tooltip } from '@qwik-ui/headless';
+import '../snippets/styling.css';
+
+export default component$(() => {
+  return (
+    <Tooltip.Root delayDuration={800} gutter={4} flip>
+      <Tooltip.Trigger class="custom-trigger">Hover or Focus me</Tooltip.Trigger>
+      <Tooltip.Panel class="custom-tooltip-panel">Tooltip content here</Tooltip.Panel>
+    </Tooltip.Root>
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/tooltip/examples/transition.tsx b/apps/website/src/routes/docs/headless/tooltip/examples/transition.tsx
@@ -0,0 +1,13 @@
+import { component$ } from '@builder.io/qwik';
+import { Tooltip } from '@qwik-ui/headless';
+
+export default component$(() => {
+  return (
+    <Tooltip.Root gutter={4} flip>
+      <Tooltip.Trigger>Hover or Focus me</Tooltip.Trigger>
+      <Tooltip.Panel class="tooltip-transition">
+        Tooltip content with transition
+      </Tooltip.Panel>
+    </Tooltip.Root>
+  );
+});