Tooltip

npm install @radix-ui/react-tooltip

import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import React from "react";
import { tooltip, type TooltipProps } from "@tailus/themer";


const TooltipProvider = TooltipPrimitive.Provider;
const TooltipRoot = TooltipPrimitive.Root;
const TooltipTrigger = TooltipPrimitive.Trigger;
const TooltipPortal = TooltipPrimitive.Portal;

const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & TooltipProps
  >(({ className, fancy=false, inverted=true, sideOffset = 4, ...props }, ref) => {
    
    const { content } = tooltip();

    if (fancy && inverted) {
      throw new Error('The fancy and inverted props cannot be used together.');
    }

    return(
      <TooltipPrimitive.Content
        sideOffset={sideOffset}
        className={content({ fancy, inverted, className })}
        ref={ref}
        {...props}
      />
    )
  })

const TooltipArrow = React.forwardRef<
  SVGSVGElement, React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow> & TooltipProps
  >(({ fancy, inverted, className, ...props }) => {
  
    const { arrow } = tooltip();

    if (fancy && inverted) {
      throw new Error('The fancy and inverted props cannot be used together.');
    }
  
    return(
      <TooltipPrimitive.Arrow
        className={arrow({ fancy, inverted, className })}
        {...props}
      />
    )
  }
);

export {
  TooltipProvider,
  TooltipRoot,
  TooltipTrigger,
  TooltipPortal,
  TooltipContent,
  TooltipArrow
};

export default {
  Provider: TooltipProvider,
  Root: TooltipRoot,
  Trigger: TooltipTrigger,
  Portal: TooltipPortal,
  Content: TooltipContent,
  Arrow: TooltipArrow
}

import { Archive } from "lucide-react";
import Tooltip from "@tailus-ui/Tooltip";
import Button from "@tailus-ui/Button";

export const Overview = () => (
  <Tooltip.Provider>
    <Tooltip.Root delayDuration={100}>
      <Tooltip.Trigger asChild>
        <Button.Root intent="warning">
          <Button.Icon type="only">
            <Archive />
          </Button.Icon>
        </Button.Root>
      </Tooltip.Trigger>
      <Tooltip.Portal>
        <Tooltip.Content>
          Archive
        </Tooltip.Content>
      </Tooltip.Portal>
    </Tooltip.Root>
    </Tooltip.Provider>
)