Tooltip

1"use client";
2 
3import "./tooltip.css";
4import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { TooltipContext, useTooltipContext } from "./tooltip.context";
9import { tooltipVariants, type TooltipVariants } from "./tooltip.variants";
10 
11export type TooltipProviderProps = React.ComponentProps<typeof BaseTooltip.Provider>;
12 
13export const TooltipProvider = (props: TooltipProviderProps) => {
14  return <BaseTooltip.Provider {...props} />;
15};
16 
17export type TooltipProps = TooltipVariants & React.ComponentProps<typeof BaseTooltip.Root>;
18 
19export const TooltipRoot = ({ children, variant, ...props }: TooltipProps) => {
20  const slots = tooltipVariants({ variant });
21 
22  return (
23    <TooltipContext.Provider value={{ slots }}>
24      <BaseTooltip.Root {...props}>{children}</BaseTooltip.Root>
25    </TooltipContext.Provider>
26  );
27};
28 
29export type TooltipTriggerProps = React.ComponentProps<typeof BaseTooltip.Trigger>;
30 
31export const TooltipTrigger = ({ className, ...props }: TooltipTriggerProps) => {
32  const { slots } = useTooltipContext();
33  return <BaseTooltip.Trigger className={cn(slots.trigger(), className)} {...props} />;
34};
35 
36export type TooltipPortalProps = React.ComponentProps<typeof BaseTooltip.Portal>;
37 
38export const TooltipPortal = (props: TooltipPortalProps) => {
39  return <BaseTooltip.Portal {...props} />;
40};
41 
42export type TooltipPositionerProps = React.ComponentProps<typeof BaseTooltip.Positioner>;
43 
44export const TooltipPositioner = ({
45  className,
46  sideOffset = 6,
47  ...props
48}: TooltipPositionerProps) => {
49  const { slots } = useTooltipContext();
50  return (
51    <BaseTooltip.Positioner
52      className={cn(slots.positioner(), className)}
53      sideOffset={sideOffset}
54      {...props}
55    />
56  );
57};
58 
59export type TooltipPopupProps = React.ComponentProps<typeof BaseTooltip.Popup>;
60 
61export const TooltipPopup = ({ className, ...props }: TooltipPopupProps) => {
62  const { slots } = useTooltipContext();
63  return <BaseTooltip.Popup className={cn(slots.popup(), className)} {...props} />;
64};
65 
66export type TooltipArrowProps = React.ComponentProps<typeof BaseTooltip.Arrow>;
67 
68export const TooltipArrow = ({ className, ...props }: TooltipArrowProps) => {
69  const { slots } = useTooltipContext();
70  return <BaseTooltip.Arrow className={cn(slots.arrow(), className)} {...props} />;
71};
72 
73export type TooltipViewportProps = React.ComponentProps<typeof BaseTooltip.Viewport>;
74 
75// … truncated