MicroClub Tooltip

1'use client';
2 
3import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
4 
5import { cn } from '@/lib/utils';
6 
7function McTooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {
8  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />;
9}
10 
11function McTooltip({ ...props }: TooltipPrimitive.Root.Props) {
12  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
13}
14 
15function McTooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
16  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
17}
18 
19function McTooltipContent({
20  className,
21  side = 'top',
22  sideOffset = 4,
23  align = 'center',
24  alignOffset = 0,
25  children,
26  title,
27  desc,
28  ...props
29}: TooltipPrimitive.Popup.Props &
30  Pick<TooltipPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> & {
31    desc?: string;
32    ttitle?: string;
33  }) {
34  return (
35    <TooltipPrimitive.Portal>
36      <TooltipPrimitive.Positioner
37        align={align}
38        alignOffset={alignOffset}
39        side={side}
40        sideOffset={sideOffset}
41        className="isolate z-50"
42      >
43        <TooltipPrimitive.Popup
44          data-slot="tooltip-content"
45          className={cn(
46            'z-50 inline-flex h-fit max-w-58  origin-(--transform-origin) items-center  rounded-sm bg-card-background  gap-2 shadow-[0px_1px_4px_0px_#E6E9FF] data-[side=bottom]:mt-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:mr-1.5 data-[side=left]:slide-in-from-right-2 data-[side=right]:ml-1.5 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=top]:mb-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
47            className
48          )}
49          {...props}
50        >
51          <div className=" flex flex-col gap-2 p-4 text-wrap">
52            {title && <p className=" text-foreground text-xs/semi-bold] text-wrap">{title}</p>}
53            {desc && (
54              <p className="text-muted-foreground  font-dm-sans font-normal text-[12px] leading-4.5 tracking-[0] align-middle wrap-anywhere">
55// … truncated