feat: initial refactored tooltip

Author: thejackshelton

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

@@ -0,0 +1,11 @@
+import { component$ } from '@builder.io/qwik';
+import { Tooltip } from '@qwik-ui/headless';
+
+export default component$(() => {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger>Hover over me</Tooltip.Trigger>
+      <Tooltip.Content>I'm a tooltip!</Tooltip.Content>
+    </Tooltip.Root>
+  );
+});

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

@@ -0,0 +1,7 @@
+---
+title: Qwik UI | Tooltip
+---
+
+# Tooltip
+
+<Showcase name="hero" />

apps/website/src/routes/docs/headless/tooltip/snippets/building-blocks.tsx

@@ -0,0 +1,7 @@
+import { component$, useSignal } from '@builder.io/qwik';
+import { Toggle } from '@qwik-ui/headless';
+
+export default component$(() => {
+  const toggleChecked = useSignal(false);
+  return <Toggle pressed={toggleChecked.value} />;
+});

packages/kit-headless/src/components/tooltip/index.ts

@@ -0,0 +1,3 @@
+export { HTooltipRoot as Root } from './tooltip-root';
+export { HTooltipContent as Content } from './tooltip-content';
+export { HTooltipTrigger as Trigger } from './tooltip-trigger';

packages/kit-headless/src/components/tooltip/tooltip-content.tsx

@@ -0,0 +1,10 @@
+import { Slot, component$ } from '@builder.io/qwik';
+import { HPopoverPanel } from '../popover/popover-panel';
+
+export const HTooltipContent = component$(() => {
+  return (
+    <HPopoverPanel>
+      <Slot />
+    </HPopoverPanel>
+  );
+});

packages/kit-headless/src/components/tooltip/tooltip-root.tsx

@@ -0,0 +1,10 @@
+import { Slot, component$ } from '@builder.io/qwik';
+import { HPopoverRoot } from '../popover/popover-root';
+
+export const HTooltipRoot = component$(() => {
+  return (
+    <HPopoverRoot hover>
+      <Slot />
+    </HPopoverRoot>
+  );
+});

packages/kit-headless/src/components/tooltip/tooltip-trigger.tsx

@@ -0,0 +1,10 @@
+import { Slot, component$ } from '@builder.io/qwik';
+import { HPopoverTrigger } from '../popover/popover-trigger';
+
+export const HTooltipTrigger = component$(() => {
+  return (
+    <HPopoverTrigger>
+      <Slot />
+    </HPopoverTrigger>
+  );
+});

packages/kit-headless/src/index.ts

@@ -14,3 +14,4 @@ export * from './components/separator';
 export * as Tabs from './components/tabs';
 export { Toggle } from './components/toggle';
 export * from './utils/visually-hidden';
+export * as Tooltip from './components/tooltip';