1import { Tooltip } from "@ssaprt/tooltip";
2import "@ssaprt/tooltip/style.css";
3
4export const Example = () => {
5    return (
6        <Tooltip content="Copy value">
7            <button type="button">Copy</button>
8        </Tooltip>
9    );
10};

1<Tooltip
2    content="Saved successfully || <Component /> || Any html code"
3    position="bottom"
4    selectTheme="dark"
5    animation={{
6        show: "bounce",
7        hide: "fade",
8        speed: "180ms",
9        easing: "ease-out",
10    }}
11    hideDelay={200}
12>
13    <button type="button">Save</button>
14</Tooltip>

1import { TooltipProvider } from "@ssaprt/tooltip";
2import "@ssaprt/tooltip/style.css";
3
4export const AppProvider = ({
5    children,
6}: {
7    children: React.ReactNode;
8}) => {
9    return (
10        <TooltipProvider
11            defaultRenderPosition="top"
12            selectTheme="glass"
13            animation={{
14                show: "slide",
15                hide: "fade",
16                speed: "140ms",
17                easing: "ease-in-out",
18            }}
19        >
20            {children}
21        </TooltipProvider>
22    );
23};

1<Tooltip
2    content="Custom theme"
3    customTheme={{
4        body: {
5            background:
6                "linear-gradient(135deg, #7c3aed, #db2777)",
7            filter:
8                "drop-shadow(0 12px 24px rgba(124, 58, 237, 0.4))",
9            style: {
10                color: "#ffffff",
11                padding: "12px 16px",
12                border: "2px solid #f0abfc",
13                borderRadius: "18px 6px",
14                fontSize: "14px",
15                fontWeight: 700,
16            },
17        },
18        arrow: {
19            size: "10px",
20            width: "24px",
21        },
22        animation: {
23            show: "bounce",
24            hide: "scale",
25            speed: "220ms",
26            easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",
27        },
28    }}
29>
30    <button type="button">Custom</button>
31</Tooltip>