Glass Tooltip

1"use client";
2 
3import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
4import { GlassSurface } from "@/components/ui/glass-surface";
5import { cn } from "@/lib/utils";
6 
7const GlassTooltipProvider = TooltipPrimitive.Provider;
8const GlassTooltip = TooltipPrimitive.Root;
9const GlassTooltipTrigger = TooltipPrimitive.Trigger;
10 
11interface GlassTooltipContentProps extends TooltipPrimitive.Popup.Props {
12  align?: TooltipPrimitive.Positioner.Props["align"];
13  side?: TooltipPrimitive.Positioner.Props["side"];
14  sideOffset?: number;
15  tint?: number;
16  tintColor?: string;
17}
18 
19function GlassTooltipContent({
20  align = "center",
21  side = "top",
22  sideOffset = 8,
23  tint = 0.6,
24  tintColor,
25  className,
26  children,
27  ...props
28}: GlassTooltipContentProps) {
29  return (
30    <TooltipPrimitive.Portal>
31      <TooltipPrimitive.Positioner
32        align={align}
33        className="z-50"
34        side={side}
35        sideOffset={sideOffset}
36      >
37        <TooltipPrimitive.Popup
38          className={cn(
39            "origin-[var(--transform-origin)] transition-[scale,opacity] duration-200 ease-[cubic-bezier(0.34,1.3,0.64,1)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-100 data-[starting-style]:scale-75",
40            className
41          )}
42          {...props}
43        >
44          <GlassSurface
45            blur={12}
46            radius={999}
47            tint={tint}
48            tintColor={tintColor}
49          >
50            <span className="block whitespace-nowrap px-3.5 py-2 font-medium text-[#1d1d1f] text-[13px] leading-none dark:text-[#f5f5f7]">
51              {children}
52            </span>
53          </GlassSurface>
54        </TooltipPrimitive.Popup>
55      </TooltipPrimitive.Positioner>
56    </TooltipPrimitive.Portal>
57  );
58}
59 
60export {
61  GlassTooltip,
62  GlassTooltipContent,
63  GlassTooltipProvider,
64  GlassTooltipTrigger,
65};
66export type { GlassTooltipContentProps };