Tooltip Beta (#934)

* feat(tooltip): implement tooltip to beta phase

* fix(tooltip): small tweaks to the tooltip state

* fix: remove animations form tooltip docs and fix placement example

* feat(tooltip): implement onOpenChange$

* chore: fix changeset type

* test: update placement test to remove loop

* fix: remove breaking examples and tooltip route

* fix: checkbox tests preventing us from opening pw

* refactor: deprecate popover hover prop in favor of tooltip

* latest

---------

Co-authored-by: Christopher Woolum <[email protected]>

Author: thejackshelton

.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/hover.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/placement.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/examples/test-hide.tsx

@@ -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/popover/index.mdx

@@ -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/animation.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>
+  );
+});