a tool for shared writing and social publishing
leaflet.pub
1import * as RadixTooltip from "@radix-ui/react-tooltip";
2import { PopoverArrow } from "./Icons/PopoverArrow";
3import { theme } from "tailwind.config";
4import { NestedCardThemeProvider } from "./ThemeManager/ThemeProvider";
5
6export const Tooltip = (props: {
7 trigger: React.ReactNode;
8 disabled?: boolean;
9 children: React.ReactNode;
10 delayDuration?: number;
11 skipDelayDuration?: number;
12 align?: "start" | "end" | "center";
13 side?: "top" | "bottom" | "left" | "right";
14 background?: string;
15 border?: string;
16 className?: string;
17 open?: boolean;
18 onOpenChange?: (open: boolean) => void;
19 asChild?: boolean;
20 arrowFill?: string;
21}) => {
22 return (
23 <RadixTooltip.Provider
24 delayDuration={props.delayDuration ? props.delayDuration : 600}
25 skipDelayDuration={
26 props.skipDelayDuration ? props.skipDelayDuration : 300
27 }
28 >
29 <RadixTooltip.Root>
30 <RadixTooltip.Trigger disabled={props.disabled} asChild={props.asChild}>
31 {props.trigger}
32 </RadixTooltip.Trigger>
33 <RadixTooltip.Portal>
34 <NestedCardThemeProvider>
35 <RadixTooltip.Content
36 className={`
37 z-20 bg-bg-page
38 px-3 py-2
39 max-w-(--radix-popover-content-available-width)
40 max-h-(--radix-popover-content-available-height)
41 border border-border rounded-md shadow-md
42 overflow-y-scroll no-scrollbar
43 ${props.className}
44 `}
45 side={props.side}
46 align={props.align ? props.align : "center"}
47 sideOffset={4}
48 collisionPadding={16}
49 >
50 {props.children}
51 <RadixTooltip.Arrow
52 asChild
53 width={16}
54 height={8}
55 viewBox="0 0 16 8"
56 >
57 <PopoverArrow
58 arrowFill={theme.colors["border"]}
59 arrowStroke="transparent"
60 />
61 </RadixTooltip.Arrow>
62 </RadixTooltip.Content>
63 </NestedCardThemeProvider>
64 </RadixTooltip.Portal>
65 </RadixTooltip.Root>
66 </RadixTooltip.Provider>
67 );
68};