feat: tooltip docs

Author: thejackshelton

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

@@ -431,7 +431,7 @@ To read more about the popover API you can check it out on:
     },
     {
       name: 'floating',
-      type: 'boolean',
+      type: 'boolean | TPlacement',
       description: 'Enables extra JavaScript behavior for floating elements.',
     },
     {
@@ -450,24 +450,6 @@ To read more about the popover API you can check it out on:
       type: 'number',
       description: 'The space between the floating element and the anchored element.',
     },
-    {
-      name: 'placement',
-      type: 'union',
-      info: ` | 'top'
-    | 'top-start'
-    | 'top-end'
-    | 'right'
-    | 'right-start'
-    | 'right-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'left'
-    | 'left-start'
-    | 'left-end';`,
-      description:
-        'Flips the placement of the popover when it starts to collide with the boundaries.',
-    },
     {
       name: '[popover]',
       type: 'selector',

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

@@ -1,11 +1,16 @@
-import { component$ } from '@builder.io/qwik';
+import { component$, useStyles$ } from '@builder.io/qwik';
 import { Tooltip } from '@qwik-ui/headless';
 
 export default component$(() => {
+  useStyles$(styles);
+
   return (
     <Tooltip.Root>
-      <Tooltip.Trigger>Hover over me</Tooltip.Trigger>
-      <Tooltip.Content>I'm a tooltip!</Tooltip.Content>
+      <Tooltip.Trigger class="tooltip-trigger">Hover over me</Tooltip.Trigger>
+      <Tooltip.Content class="tooltip-content">I'm a tooltip!</Tooltip.Content>
     </Tooltip.Root>
   );
 });
+
+// internal
+import styles from '../snippets/tooltip.css?inline';

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

@@ -4,4 +4,81 @@ title: Qwik UI | Tooltip
 
 # Tooltip
 
+A popup that shows information when an element is focused or hovered over.
+
 <Showcase name="hero" />
+
+## ✨ Features
+
+<FeatureList
+  features={[
+    'Above the rest of the page',
+    'Hover and non-hover behavior',
+    'Close with escape',
+  ]}
+/>
+
+## Building blocks
+
+```tsx
+import { component$ } from '@builder.io/qwik';
+import { Tooltip } from '@qwik-ui/headless';
+
+export default component$(() => {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger>Trigger</Tooltip.Trigger>
+      <Tooltip.Panel>Panel</Tooltip.Panel>
+    </Tooltip.Root>
+  );
+});
+```
+
+### 🎨 Anatomy
+
+<AnatomyTable
+  propDescriptors={[
+    {
+      name: 'Tooltip.Root',
+      description: 'The parent container for the tooltip trigger and panel.',
+    },
+    {
+      name: 'Tooltip.Trigger',
+      description: 'A button that opens the tooltip when interacted with.',
+    },
+    {
+      name: 'Tooltip.Panel',
+      description: `An HTML Element that is above other content on the page.`,
+    },
+  ]}
+/>
+
+## API
+
+### Tooltip Root
+
+<APITable
+  propDescriptors={[
+    {
+      name: 'hover',
+      type: 'boolean',
+      description: 'Disables hover behavior.',
+    },
+    {
+      name: 'flip',
+      type: 'boolean',
+      description:
+        'Flips the placement of the tooltip when it starts to collide with the boundaries.',
+    },
+    {
+      name: 'gutter',
+      type: 'number',
+      description: 'The space between the floating element and the anchored element.',
+    },
+    {
+      name: 'floating',
+      type: 'string',
+      description: 'The floating position of the tooltip.',
+    },
+  ]}
+/>

apps/website/src/routes/docs/headless/tooltip/snippets/tooltip.css

@@ -0,0 +1,23 @@
+.tooltip-trigger {
+  border-radius: var(--border-radius);
+  border: 2px dotted hsla(var(--foreground));
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  padding: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.tooltip-trigger:hover {
+  background-color: hsla(var(--primary) / 0.08);
+}
+
+.tooltip-content {
+  border-radius: var(--border-radius);
+  border: 2px dotted hsla(var(--primary));
+  background: hsla(var(--tooltip));
+  color: hsl(var(--foreground));
+  padding: 0.5rem;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}

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

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

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

@@ -1,9 +1,11 @@
-import { Slot, component$ } from '@builder.io/qwik';
+import { PropsOf, Slot, component$ } from '@builder.io/qwik';
 import { HPopoverRoot } from '../popover/popover-root';
 
-export const HTooltipRoot = component$(() => {
+export const HTooltipRoot = component$((props: PropsOf<typeof HPopoverRoot>) => {
+  const { hover = true, floating = 'top', ...rest } = props;
+
   return (
-    <HPopoverRoot hover>
+    <HPopoverRoot hover={hover} floating={floating} {...rest}>
       <Slot />
     </HPopoverRoot>
   );

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

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