docs: add Tooltip docs
This commit is contained in:
parent
9b8a0f5145
commit
b55a0ea01c
@ -39,6 +39,9 @@ import ComponentsTabs, {
|
|||||||
import ComponentsToast, {
|
import ComponentsToast, {
|
||||||
tableOfContents as componentsToastToc,
|
tableOfContents as componentsToastToc,
|
||||||
} from "./docs/components/Toast.mdx";
|
} from "./docs/components/Toast.mdx";
|
||||||
|
import ComponentsTooltip, {
|
||||||
|
tableOfContents as componentsTooltipToc,
|
||||||
|
} from "./docs/components/Tooltip.mdx";
|
||||||
|
|
||||||
import { ForwardedRef, forwardRef, useContext, useEffect, useRef } from "react";
|
import { ForwardedRef, forwardRef, useContext, useEffect, useRef } from "react";
|
||||||
import { HeadingContext } from "./HeadingContext";
|
import { HeadingContext } from "./HeadingContext";
|
||||||
@ -204,6 +207,14 @@ const router = createBrowserRouter(
|
|||||||
</DynamicLayout>
|
</DynamicLayout>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
<Route
|
||||||
|
path="tooltip"
|
||||||
|
element={
|
||||||
|
<DynamicLayout toc={componentsTooltipToc}>
|
||||||
|
<ComponentsTooltip components={overrideComponents} />
|
||||||
|
</DynamicLayout>
|
||||||
|
}
|
||||||
|
/>
|
||||||
</Route>
|
</Route>
|
||||||
</Route>
|
</Route>
|
||||||
</Route>
|
</Route>
|
||||||
|
|||||||
@ -64,6 +64,11 @@ export default {
|
|||||||
path: "/docs/components/toast",
|
path: "/docs/components/toast",
|
||||||
name: "Toast",
|
name: "Toast",
|
||||||
eq: (pathname: string) => pathname === "/docs/components/toast"
|
eq: (pathname: string) => pathname === "/docs/components/toast"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/docs/components/tooltip",
|
||||||
|
name: "Tooltip",
|
||||||
|
eq: (pathname: string) => pathname === "/docs/components/tooltip"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
134
packages/react/src/docs/components/Tooltip.mdx
Normal file
134
packages/react/src/docs/components/Tooltip.mdx
Normal file
@ -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.
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<TooltipDemo />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
1. Create a new file `Tooltip.tsx` in your component folder.
|
||||||
|
2. Copy and paste the following code into the file.
|
||||||
|
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/components/Tooltip.tsx`} />
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Tooltip, TooltipContent } from "@components/Tooltip";
|
||||||
|
```
|
||||||
|
|
||||||
|
```html
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipContent>
|
||||||
|
{/* Tooltip Content */}
|
||||||
|
</TooltipContent>
|
||||||
|
{/* Tooltip Trigger */}
|
||||||
|
</Tooltip>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 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
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Top />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/Top.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Bottom
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Bottom />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/Bottom.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Left
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Left />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/Left.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Right
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Right />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/Right.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Tooltip, TooltipContent } from "@components/Tooltip";
|
||||||
|
|
||||||
|
export function Bottom() {
|
||||||
|
return (
|
||||||
|
<Tooltip position="bottom">
|
||||||
|
<TooltipContent>
|
||||||
|
<p>Tooltip!</p>
|
||||||
|
</TooltipContent>
|
||||||
|
<Button>Hover me</Button>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Tooltip, TooltipContent } from "@components/Tooltip";
|
||||||
|
|
||||||
|
export function Left() {
|
||||||
|
return (
|
||||||
|
<Tooltip position="left">
|
||||||
|
<TooltipContent>
|
||||||
|
<p>Tooltip!</p>
|
||||||
|
</TooltipContent>
|
||||||
|
<Button>Hover me</Button>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Tooltip, TooltipContent } from "@components/Tooltip";
|
||||||
|
|
||||||
|
export function Right() {
|
||||||
|
return (
|
||||||
|
<Tooltip position="right">
|
||||||
|
<TooltipContent>
|
||||||
|
<p>Tooltip!</p>
|
||||||
|
</TooltipContent>
|
||||||
|
<Button>Hover me</Button>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Tooltip, TooltipContent } from "@components/Tooltip";
|
||||||
|
|
||||||
|
export function Top() {
|
||||||
|
return (
|
||||||
|
<Tooltip position="top">
|
||||||
|
<TooltipContent>
|
||||||
|
<p>Tooltip!</p>
|
||||||
|
</TooltipContent>
|
||||||
|
<Button>Hover me</Button>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -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 };
|
||||||
|
|
||||||
13
packages/react/src/docs/components/TooltipBlocks/Preview.tsx
Normal file
13
packages/react/src/docs/components/TooltipBlocks/Preview.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Tooltip, TooltipContent } from "@components/Tooltip";
|
||||||
|
|
||||||
|
export function TooltipDemo() {
|
||||||
|
return (
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipContent>
|
||||||
|
<p>Tooltip!</p>
|
||||||
|
</TooltipContent>
|
||||||
|
<Button>Hover me</Button>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user