Something went wrong. Try again.
leaflet fork for copy edit / bug fixes forked from leaflet.pub/leaflet
Something went wrong. Try again.
2.2 kB · 68 lines
TSX
at main
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 ?? 600} skipDelayDuration={props.skipDelayDuration ?? 300} > <RadixTooltip.Root onOpenChange={props.onOpenChange}> <RadixTooltip.Trigger disabled={props.disabled} asChild={props.asChild}> {props.trigger} </RadixTooltip.Trigger> <RadixTooltip.Portal> <NestedCardThemeProvider> <RadixTooltip.Content className={` portalStyles z-20 bg-bg-page px-3 py-2 max-w-(--radix-popover-content-available-width) max-h-(--radix-popover-content-available-height) light-container 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> );};