Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
2.2 kB · 68 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869import * as RadixTooltip from "@radix-ui/react-tooltip";import { PopoverArrow } from "./Icons/PopoverArrow";import { theme } from "tailwind.config";import { NestedCardThemeProvider } from "./ThemeManager/ThemeProvider";
export const Tooltip = (props: { trigger: React.ReactNode; disabled?: boolean; children: React.ReactNode; delayDuration?: number; skipDelayDuration?: number; align?: "start" | "end" | "center"; side?: "top" | "bottom" | "left" | "right"; background?: string; border?: string; className?: string; open?: boolean; onOpenChange?: (open: boolean) => void; asChild?: boolean; arrowFill?: string;}) => { return ( <RadixTooltip.Provider delayDuration={props.delayDuration ? props.delayDuration : 600} skipDelayDuration={ props.skipDelayDuration ? props.skipDelayDuration : 300 } > <RadixTooltip.Root> <RadixTooltip.Trigger disabled={props.disabled} asChild={props.asChild}> {props.trigger} </RadixTooltip.Trigger> <RadixTooltip.Portal> <NestedCardThemeProvider> <RadixTooltip.Content className={` z-20 bg-bg-page px-3 py-2 max-w-(--radix-popover-content-available-width) max-h-(--radix-popover-content-available-height) border border-border rounded-md shadow-md overflow-y-scroll no-scrollbar ${props.className} `} side={props.side} align={props.align ? props.align : "center"} sideOffset={4} collisionPadding={16} > {props.children} <RadixTooltip.Arrow asChild width={16} height={8} viewBox="0 0 16 8" > <PopoverArrow arrowFill={theme.colors["border"]} arrowStroke="transparent" /> </RadixTooltip.Arrow> </RadixTooltip.Content> </NestedCardThemeProvider> </RadixTooltip.Portal> </RadixTooltip.Root> </RadixTooltip.Provider> );};