feat: add Controlled tooltip example
Added a new example, 'Controlled', for the Tooltip component in the documentation. The 'Controlled' example demonstrates how to use tooltip with controlled states. The change includes the update of examples index and documentation MDX page.
This commit is contained in:
parent
ca90f3355a
commit
90960ff800
@ -184,3 +184,20 @@ import { Tooltip, TooltipContent } from "@components/Tooltip";
|
||||
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/LateDelay.tsx`} />
|
||||
</TabContent>
|
||||
</TabProvider>
|
||||
|
||||
### Controlled
|
||||
|
||||
<TabProvider defaultName="preview">
|
||||
<TabList>
|
||||
<TabTrigger name={"preview"}>Preview</TabTrigger>
|
||||
<TabTrigger name={"code"}>Code</TabTrigger>
|
||||
</TabList>
|
||||
<TabContent name={"preview"}>
|
||||
<Story layout={"centered"}>
|
||||
<Examples.Controlled />
|
||||
</Story>
|
||||
</TabContent>
|
||||
<TabContent name={"code"}>
|
||||
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/Controlled.tsx`} />
|
||||
</TabContent>
|
||||
</TabProvider>
|
@ -0,0 +1,16 @@
|
||||
import { Button } from "@components/Button";
|
||||
import { Tooltip, TooltipContent } from "@components/Tooltip";
|
||||
import { useState } from "react";
|
||||
|
||||
export function Controlled() {
|
||||
const [opened, setOpened] = useState(false);
|
||||
|
||||
return (
|
||||
<Tooltip position="top" controlled opened={opened}>
|
||||
<TooltipContent delay={"early"}>
|
||||
<p>Tooltip!</p>
|
||||
</TooltipContent>
|
||||
<Button onClick={() => setOpened((p) => !p)}>Open hover</Button>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
@ -5,5 +5,15 @@ import { Top } from "./Top";
|
||||
import { NoDelay } from "./NoDelay";
|
||||
import { EarlyDelay } from "./EarlyDelay";
|
||||
import { LateDelay } from "./LateDelay";
|
||||
import { Controlled } from "./Controlled";
|
||||
|
||||
export default { Bottom, Left, Right, Top, NoDelay, EarlyDelay, LateDelay };
|
||||
export default {
|
||||
Bottom,
|
||||
Left,
|
||||
Right,
|
||||
Top,
|
||||
NoDelay,
|
||||
EarlyDelay,
|
||||
LateDelay,
|
||||
Controlled,
|
||||
};
|
||||
|
Loading…
x
Reference in New Issue
Block a user