Tooltip Beta

.changeset/tasty-pugs-decide.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+feat: implement a beta version of the Tooltip component

apps/website/src/_state/component-statuses.ts

@@ -49,6 +49,6 @@ export const statusByComponent: ComponentKitsStatuses = {
     Select: ComponentStatus.Beta,
     Separator: ComponentStatus.Beta,
     Tabs: ComponentStatus.Beta,
-    Tooltip: ComponentStatus.Draft,
+    Tooltip: ComponentStatus.Beta,
   },
 };

apps/website/src/components/showcase/showcase.tsx

@@ -18,9 +18,13 @@ export const Showcase = component$<ShowcaseProps>(({ name, ...props }) => {
   const componentCodeSig = useSignal<string>();
 
   useTask$(async () => {
-    // eslint-disable-next-line qwik/valid-lexical-scope
-    MetaGlobComponentSig.value = await metaGlobComponents[componentPath](); // We need to call `await metaGlobComponents[componentPath]()` in development as it is `eager:false`
-    componentCodeSig.value = await rawComponents[componentPath]();
+    try {
+      // eslint-disable-next-line qwik/valid-lexical-scope
+      MetaGlobComponentSig.value = await metaGlobComponents[componentPath](); // We need to call `await metaGlobComponents[componentPath]()` in development as it is `eager:false`
+      componentCodeSig.value = await rawComponents[componentPath]();
+    } catch (e) {
+      throw new Error(`Unable to load path ${componentPath}`);
+    }
   });
 
   return (

apps/website/src/routes/docs/headless/popover/examples/corners.tsx

@@ -3,9 +3,9 @@ import { Popover } from '@qwik-ui/headless';
 
 export default component$(() => {
   return (
-    <Popover.Root hover gutter={4} floating="top-end">
+    <Popover.Root gutter={4} floating="top-end">
       <div class="popover-container">
-        <Popover.Trigger class="popover-trigger">Hover over me</Popover.Trigger>
+        <Popover.Trigger class="popover-trigger">Click me</Popover.Trigger>
       </div>
 
       <Popover.Panel class="popover-panel">I am on the top-right corner!</Popover.Panel>

apps/website/src/routes/docs/headless/popover/examples/placement.tsx

@@ -3,10 +3,10 @@ import { Popover } from '@qwik-ui/headless';
 
 export default component$(() => {
   return (
-    <Popover.Root hover gutter={4} floating="right">
+    <Popover.Root gutter={4} floating="right">
       <div class="popover-container">
         <p>popover on the right ⤵️</p>
-        <Popover.Trigger class="popover-trigger">Hover over me</Popover.Trigger>
+        <Popover.Trigger class="popover-trigger">Click me</Popover.Trigger>
       </div>
 
       <Popover.Panel class="popover-panel">I am anchored to the trigger!</Popover.Panel>

apps/website/src/routes/docs/headless/popover/examples/test-hide.tsx

@@ -4,7 +4,7 @@ export default component$(() => {
   const { hidePopover } = usePopover('hide-id');
 
   return (
-    <Popover.Root id="hide-id" manual hover>
+    <Popover.Root id="hide-id" manual>
       <button onClick$={() => hidePopover()}>hide popover</button>
       <Popover.Trigger class="popover-trigger">Click me</Popover.Trigger>
       <Popover.Panel class="popover">My Hero!</Popover.Panel>

apps/website/src/routes/docs/headless/popover/index.mdx

@@ -3,6 +3,7 @@ title: Qwik UI | Popover
 ---
 
 import { statusByComponent } from '~/_state/component-statuses';
+
 import styles from './snippets/popover.css';
 
 <StatusBanner status={statusByComponent.headless.Popover} />
@@ -273,12 +274,6 @@ Instead, the popover will be fixed position, and you can use CSS to position it.
 
 The `Popover.Root` component is designed for positioning elements that float and facilitating interactions with them.
 
-### Hover
-
-If we'd like to show the `Popover.Panel` on hover, we can use the `hover` prop.
-
-<Showcase name="hover" />
-
 ### Custom Floating Position
 
 By default, popovers will float below the trigger component.

apps/website/src/routes/docs/headless/tooltip/examples/animation.tsx

@@ -0,0 +1,15 @@
+import { component$ } from '@builder.io/qwik';
+import { Tooltip } from '@qwik-ui/headless';
+
+import '../snippets/animation.css';
+
+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>
+  );
+});

apps/website/src/routes/docs/headless/tooltip/examples/arrow-styling.tsx

@@ -0,0 +1,19 @@
+import { component$ } from '@builder.io/qwik';
+import { Tooltip } from '@qwik-ui/headless';
+
+import '../snippets/arrow-styling.css';
+
+export default component$(() => {
+  return (
+    <Tooltip.Root gutter={4} flip>
+      <Tooltip.Trigger>Hover or Focus me</Tooltip.Trigger>
+      <Tooltip.Panel aria-label="Tooltip content" class="tooltip-arrow-styled-panel">
+        <Tooltip.Arrow class="tooltip-arrow-styled-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>
+  );
+});

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>
+  );
+});

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>
+  );
+});

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>
+  );
+});

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>
+  );
+});

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>
+  );
+});

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>
+  );
+});

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';

apps/website/src/routes/docs/headless/tooltip/examples/onChange.tsx

@@ -0,0 +1,19 @@
+import { component$, useSignal } from '@builder.io/qwik';
+import { Tooltip } from '@qwik-ui/headless';
+
+export default component$(() => {
+  const tooltipState = useSignal<'open' | 'closed'>('closed');
+
+  return (
+    <>
+      <Tooltip.Root gutter={4} onOpenChange$={(e) => (tooltipState.value = e)} 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>
+      The tooltip is {tooltipState.value}
+    </>
+  );
+});

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 key={placement.value} 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>
+  );
+});

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>
+  );
+});

apps/website/src/routes/docs/headless/tooltip/examples/transition.tsx

@@ -0,0 +1,15 @@
+import { component$ } from '@builder.io/qwik';
+import { Tooltip } from '@qwik-ui/headless';
+
+import '../snippets/transition.css';
+
+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>
+  );
+});