diff --git a/packages/react/src/App.tsx b/packages/react/src/App.tsx
index c9dcdd7..1a60154 100644
--- a/packages/react/src/App.tsx
+++ b/packages/react/src/App.tsx
@@ -39,6 +39,9 @@ import ComponentsTabs, {
import ComponentsToast, {
tableOfContents as componentsToastToc,
} from "./docs/components/Toast.mdx";
+import ComponentsTooltip, {
+ tableOfContents as componentsTooltipToc,
+} from "./docs/components/Tooltip.mdx";
import { ForwardedRef, forwardRef, useContext, useEffect, useRef } from "react";
import { HeadingContext } from "./HeadingContext";
@@ -204,6 +207,14 @@ const router = createBrowserRouter(
}
/>
+
+
+
+ }
+ />
diff --git a/packages/react/src/RouteObject.ts b/packages/react/src/RouteObject.ts
index 171152c..b750445 100644
--- a/packages/react/src/RouteObject.ts
+++ b/packages/react/src/RouteObject.ts
@@ -64,6 +64,11 @@ export default {
path: "/docs/components/toast",
name: "Toast",
eq: (pathname: string) => pathname === "/docs/components/toast"
+ },
+ {
+ path: "/docs/components/tooltip",
+ name: "Tooltip",
+ eq: (pathname: string) => pathname === "/docs/components/tooltip"
}
]
}
diff --git a/packages/react/src/docs/components/Tooltip.mdx b/packages/react/src/docs/components/Tooltip.mdx
new file mode 100644
index 0000000..741e395
--- /dev/null
+++ b/packages/react/src/docs/components/Tooltip.mdx
@@ -0,0 +1,134 @@
+import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
+import { Story } from "@/components/Story";
+import { LoadedCode, GITHUB } from "@/components/LoadedCode";
+import { TooltipDemo } from "./TooltipBlocks/Preview";
+import Examples from "./TooltipBlocks/Examples";
+
+# Tooltip
+A brief helper for providing contextual information or guiding user interactions.
+
+
+
+ Preview
+ Code
+
+
+
+
+
+
+
+
+
+
+
+## Installation
+
+1. Create a new file `Tooltip.tsx` in your component folder.
+2. Copy and paste the following code into the file.
+
+
+
+## Usage
+
+```tsx
+import { Tooltip, TooltipContent } from "@components/Tooltip";
+```
+
+```html
+
+
+ {/* Tooltip Content */}
+
+ {/* Tooltip Trigger */}
+
+```
+
+## Props
+
+### Tooltip
+
+#### Variants
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| `position` | `"bottom" \| "left" \| "right" \| "top"` | `"top"` | The position of the tooltip. |
+
+### TooltipContent
+
+#### Variants
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| `offset` | `"sm" \| "md" \| "lg"` | `"md"` | Gap between the tooltip and the trigger. |
+
+## Examples
+
+
+### Top
+
+
+
+ Preview
+ Code
+
+
+
+
+
+
+
+
+
+
+
+### Bottom
+
+
+
+ Preview
+ Code
+
+
+
+
+
+
+
+
+
+
+
+### Left
+
+
+
+ Preview
+ Code
+
+
+
+
+
+
+
+
+
+
+
+### Right
+
+
+
+ Preview
+ Code
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/react/src/docs/components/TooltipBlocks/Examples/Bottom.tsx b/packages/react/src/docs/components/TooltipBlocks/Examples/Bottom.tsx
new file mode 100644
index 0000000..b4f15f2
--- /dev/null
+++ b/packages/react/src/docs/components/TooltipBlocks/Examples/Bottom.tsx
@@ -0,0 +1,13 @@
+import { Button } from "@components/Button";
+import { Tooltip, TooltipContent } from "@components/Tooltip";
+
+export function Bottom() {
+ return (
+
+
+ Tooltip!
+
+
+
+ );
+}
diff --git a/packages/react/src/docs/components/TooltipBlocks/Examples/Left.tsx b/packages/react/src/docs/components/TooltipBlocks/Examples/Left.tsx
new file mode 100644
index 0000000..afe3b88
--- /dev/null
+++ b/packages/react/src/docs/components/TooltipBlocks/Examples/Left.tsx
@@ -0,0 +1,13 @@
+import { Button } from "@components/Button";
+import { Tooltip, TooltipContent } from "@components/Tooltip";
+
+export function Left() {
+ return (
+
+
+ Tooltip!
+
+
+
+ );
+}
diff --git a/packages/react/src/docs/components/TooltipBlocks/Examples/Right.tsx b/packages/react/src/docs/components/TooltipBlocks/Examples/Right.tsx
new file mode 100644
index 0000000..c2b4bf7
--- /dev/null
+++ b/packages/react/src/docs/components/TooltipBlocks/Examples/Right.tsx
@@ -0,0 +1,13 @@
+import { Button } from "@components/Button";
+import { Tooltip, TooltipContent } from "@components/Tooltip";
+
+export function Right() {
+ return (
+
+
+ Tooltip!
+
+
+
+ );
+}
diff --git a/packages/react/src/docs/components/TooltipBlocks/Examples/Top.tsx b/packages/react/src/docs/components/TooltipBlocks/Examples/Top.tsx
new file mode 100644
index 0000000..a8388b9
--- /dev/null
+++ b/packages/react/src/docs/components/TooltipBlocks/Examples/Top.tsx
@@ -0,0 +1,13 @@
+import { Button } from "@components/Button";
+import { Tooltip, TooltipContent } from "@components/Tooltip";
+
+export function Top() {
+ return (
+
+
+ Tooltip!
+
+
+
+ );
+}
diff --git a/packages/react/src/docs/components/TooltipBlocks/Examples/index.ts b/packages/react/src/docs/components/TooltipBlocks/Examples/index.ts
new file mode 100644
index 0000000..a6d7dd0
--- /dev/null
+++ b/packages/react/src/docs/components/TooltipBlocks/Examples/index.ts
@@ -0,0 +1,7 @@
+import { Bottom } from "./Bottom";
+import { Left } from "./Left";
+import { Right } from "./Right";
+import { Top } from "./Top";
+
+export default { Bottom, Left, Right, Top };
+
diff --git a/packages/react/src/docs/components/TooltipBlocks/Preview.tsx b/packages/react/src/docs/components/TooltipBlocks/Preview.tsx
new file mode 100644
index 0000000..0c7aa29
--- /dev/null
+++ b/packages/react/src/docs/components/TooltipBlocks/Preview.tsx
@@ -0,0 +1,13 @@
+import { Button } from "@components/Button";
+import { Tooltip, TooltipContent } from "@components/Tooltip";
+
+export function TooltipDemo() {
+ return (
+
+
+ Tooltip!
+
+
+
+ );
+}