mm

packages/ui-web-tw/src/component/tooltip/TooltipPopup.tsx

@@ -0,0 +1,53 @@
+"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>
+);