feat: Add Tooltip primitive

apps/web/vibes/soul/docs/tooltip.mdx

@@ -0,0 +1,53 @@
+---
+title: Tooltip
+preview: tooltip-example
+previewSize: sm
+---
+
+## Usage
+
+{/* prettier-ignore-start */}
+
+<CodeBlock lang="ts">{`
+
+import { Tooltip } from '@/vibes/soul/primitives/tooltip';
+
+function Usage() {
+    return (
+      <Tooltip trigger={<div>Tooltip trigger</div>}>
+        Tooltip content
+      </Tooltip>
+    );
+}
+`}
+</CodeBlock>
+
+{/* prettier-ignore-end */}
+
+## API Reference
+
+This comoponent uses the Sonner toast component. For more information, please refer to the [Sonner documentation](https://sonner.emilkowal.ski/).
+
+### TooltipProps
+
+| Prop                | Type                                     | Default    |
+| ------------------- | ---------------------------------------- | ---------- |
+| `align`             | `'center' \| 'end' \| 'start'`           | `'center'` |
+| `className`         | `string`                                 |            |
+| `delayDuration`     | `number`                                 |            |
+| `skipDelayDuration` | `number`                                 |            |
+| `trigger`           | `React.ReactNode`                        |            |
+| `open`              | `boolean`                                |            |
+| `setOpen`           | `(open: boolean) => void`                |            |
+| `side`              | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'`    |
+| `sideOffset`        | `number`                                 | `6`        |
+
+### CSS Variables
+
+This component supports various CSS variables for theming. Here's a comprehensive list.
+
+```css
+:root {
+  --tooltip-background: hsl(var(--background));
+}
+```

apps/web/vibes/soul/examples.ts

@@ -1156,6 +1156,13 @@ export const examples = [
     files: ['examples/primitives/toaster/index.tsx'],
     component: lazy(() => import('./examples/primitives/toaster')),
   },
+  {
+    name: 'tooltip-example',
+    dependencies: [],
+    registryDependencies: ['tooltip'],
+    files: ['examples/primitives/tooltip/index.tsx'],
+    component: lazy(() => import('./examples/primitives/tooltip')),
+  },
   {
     name: 'section-layout-example-warm',
     dependencies: [],

apps/web/vibes/soul/examples/primitives/tooltip/index.tsx

@@ -0,0 +1,13 @@
+import { Tooltip } from '@/vibes/soul/primitives/tooltip';
+
+export default function Preview() {
+  return (
+    <div className="bg-background p-8 @container">
+      <div className="mx-auto flex max-w-screen-md flex-col items-center gap-8">
+        <Tooltip trigger={<div>Hover me!</div>} delayDuration={0}>
+          <p className="text-sm text-contrast-500">Put your tooltip content here!</p>
+        </Tooltip>
+      </div>
+    </div>
+  );
+}

apps/web/vibes/soul/navigation.ts

@@ -159,6 +159,12 @@ const primitivePages: [Page, ...Page[]] = [
     file: 'docs/toaster.mdx',
     component: 'toaster',
   },
+  {
+    title: 'Tooltip',
+    slug: 'tooltip',
+    file: 'docs/tooltip.mdx',
+    component: 'tooltip',
+  },
 ];
 
 const sectionPages: [Page, ...Page[]] = [

apps/web/vibes/soul/primitives/tooltip/index.tsx

@@ -0,0 +1,62 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { clsx } from 'clsx';
+
+interface TooltipProps extends React.PropsWithChildren {
+  align?: 'center' | 'end' | 'start';
+  className?: string;
+  delayDuration?: number;
+  skipDelayDuration?: number;
+  trigger?: React.ReactNode;
+  open?: boolean;
+  setOpen?: (open: boolean) => void;
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  sideOffset?: number;
+}
+
+// eslint-disable-next-line valid-jsdoc
+/**
+ * This component supports various CSS variables for theming. Here's a comprehensive list, along
+ * with their default values:
+ *
+ * ```css
+ * :root {
+ *   --tooltip-background: hsl(var(--background));
+ * ```
+ */
+export const Tooltip = ({
+  align = 'center',
+  className = '',
+  delayDuration,
+  skipDelayDuration,
+  trigger,
+  open,
+  setOpen,
+  side = 'top',
+  sideOffset = 6,
+  children,
+}: TooltipProps) => {
+  return (
+    <TooltipPrimitive.Provider delayDuration={delayDuration} skipDelayDuration={skipDelayDuration}>
+      <TooltipPrimitive.Root onOpenChange={setOpen} open={open}>
+        {trigger != null && (
+          <TooltipPrimitive.Trigger asChild={typeof trigger !== 'string'}>
+            {trigger}
+          </TooltipPrimitive.Trigger>
+        )}
+        <TooltipPrimitive.Portal>
+          <TooltipPrimitive.Content
+            align={align}
+            className={clsx(
+              'z-50 max-h-80 rounded-2xl border border-contrast-100 bg-[var(--tooltip-background,hsl(var(--background)))] p-3 shadow-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+              className,
+            )}
+            side={side}
+            sideOffset={sideOffset}
+          >
+            {children}
+          </TooltipPrimitive.Content>
+        </TooltipPrimitive.Portal>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  );
+};