Tooltip

// Tremor Tooltip [v1.0.0]
import React from "react"import * as TooltipPrimitives from "@radix-ui/react-tooltip"
import { cx } from "@/lib/utils"
interface TooltipProps  extends Omit<TooltipPrimitives.TooltipContentProps, "content" | "onClick">,  Pick<    TooltipPrimitives.TooltipProps,    "open" | "defaultOpen" | "onOpenChange" | "delayDuration"  > {  content: React.ReactNode  onClick?: React.MouseEventHandler<HTMLButtonElement>  side?: "bottom" | "left" | "top" | "right"  showArrow?: boolean}
const Tooltip = React.forwardRef<  React.ElementRef<typeof TooltipPrimitives.Content>,  TooltipProps>(  (    {      children,      className,      content,      delayDuration,      defaultOpen,      open,      onClick,      onOpenChange,      showArrow = true,      side,      sideOffset = 10,      asChild,      ...props    }: TooltipProps,    forwardedRef,  ) => {    return (      <TooltipPrimitives.Provider delayDuration={150}>        <TooltipPrimitives.Root          open={open}          defaultOpen={defaultOpen}          onOpenChange={onOpenChange}          delayDuration={delayDuration}          tremor-id="tremor-raw"        >          <TooltipPrimitives.Trigger onClick={onClick} asChild={asChild}>            {children}          </TooltipPrimitives.Trigger>          <TooltipPrimitives.Portal>            <TooltipPrimitives.Content              ref={forwardedRef}              side={side}              sideOffset={sideOffset}              align="center"              className={cx(                // base                "max-w-60 select-none rounded-md px-2.5 py-1.5 text-sm leading-5 shadow-md",                // text color                "text-gray-50 dark:text-gray-900",                // background color                "bg-gray-900 dark:bg-gray-50",                // transition                "will-change-[transform,opacity]",                "data-[side=bottom]:animate-slide-down-and-fade data-[side=left]:animate-slide-left-and-fade data-[side=right]:animate-slide-right-and-fade data-[side=top]:animate-slide-up-and-fade data-[state=closed]:animate-hide",                className,              )}              {...props}            >              {content}              {showArrow ? (                <TooltipPrimitives.Arrow                  className="border-none fill-gray-900 dark:fill-gray-50"                  width={12}                  height={7}                  aria-hidden="true"                />              ) : null}            </TooltipPrimitives.Content>          </TooltipPrimitives.Portal>        </TooltipPrimitives.Root>      </TooltipPrimitives.Provider>    )  },)
Tooltip.displayName = "Tooltip"
export { Tooltip, type TooltipProps }

@theme {  --animate-hide: hide 150ms cubic-bezier(0.16, 1, 0.3, 1);  --animate-slide-down-and-fade: slideDownAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1);  --animate-slide-left-and-fade: slideLeftAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1);  --animate-slide-up-and-fade: slideUpAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1);  --animate-slide-right-and-fade: slideRightAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1);
  @keyframes hide {    from {      opacity: 1;    }    to {      opacity: 0;    }  }  @keyframes slideDownAndFade {    from {      opacity: 0;      transform: translateY(-6px);    }    to {      opacity: 1;      transform: translateY(0);    }  }  @keyframes slideLeftAndFade {    from {      opacity: 0;      transform: translateX(6px);    }    to {      opacity: 1;      transform: translateX(0);    }  }  @keyframes slideUpAndFade {    from {      opacity: 0;      transform: translateY(6px);    }    to {      opacity: 1;      transform: translateY(0);    }  }  @keyframes slideRightAndFade {    from {      opacity: 0;      transform: translateX(-6px);    }    to {      opacity: 1;      transform: translateX(0);    }  }}