54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
"use client";
|
|
import * as BUI from "@base-ui/react";
|
|
import { useTheme } from "../theme/useTheme";
|
|
import { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
|
|
import { type ReactNode } from "react";
|
|
import { cn } from "tailwind-variants";
|
|
|
|
type TooltipPopupProps = {
|
|
hideArrow?: boolean;
|
|
side?: "top" | "bottom" | "left" | "right";
|
|
children?: ReactNode;
|
|
};
|
|
|
|
export const TooltipPopup = (props: TooltipPopupProps) => {
|
|
const { children, hideArrow = false, side } = props;
|
|
const { themeCls } = useTheme();
|
|
|
|
const tooltipPopupCls = cn(
|
|
themeCls,
|
|
itemSizeRecipe({ size: "xs", shape: "rounded" }),
|
|
"tooltip-popup",
|
|
);
|
|
|
|
return (
|
|
<BUI.Tooltip.Portal>
|
|
<BUI.Tooltip.Positioner sideOffset={8} side={side}>
|
|
<BUI.Tooltip.Popup className={tooltipPopupCls}>
|
|
{!hideArrow && (
|
|
<BUI.Tooltip.Arrow className="tooltip-arrow">
|
|
<PopupArrowUpSvg />
|
|
</BUI.Tooltip.Arrow>
|
|
)}
|
|
{children}
|
|
</BUI.Tooltip.Popup>
|
|
</BUI.Tooltip.Positioner>
|
|
</BUI.Tooltip.Portal>
|
|
);
|
|
};
|
|
|
|
const PopupArrowUpSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
|
<svg
|
|
width="10"
|
|
height="6"
|
|
viewBox="0 0 10 6"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
{...props}
|
|
>
|
|
<path d="M0 6 L5 0 L10 6 Z" className="tooltip-arrow-border" />
|
|
|
|
<path d="M1 6 L5 1 L9 6 Z" fill="var(--base-bg)" />
|
|
</svg>
|
|
);
|