Tooltip

import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const {  compose,  cva,  cx: cn,} = defineConfig({  hooks: {    onComplete: (className: string) => twMerge(className),  },});export type { VariantProps };

'use client';import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';import type * as React from 'react';import { cn } from '@/lib/utils';/** * Provides a shared delay for multiple tooltips. The grouping logic ensures that * once a tooltip becomes visible, the adjacent tooltips will be shown instantly. * * Documentation: [Caprice UI Tooltip](https://caprice-ui.com/docs/components/tooltip) * * API Reference: [Base UI Tooltip](https://base-ui.com/react/components/tooltip#provider) */export namespace Provider {  export type Props = React.ComponentProps<typeof TooltipPrimitive.Provider>;}export function Provider({ ...props }: Provider.Props) {  return <TooltipPrimitive.Provider data-slot="tooltip-provider" {...props} />;}/** * Groups all parts of the tooltip. * Doesn’t render its own HTML element. * * Documentation: [Caprice UI Tooltip](https://caprice-ui.com/docs/components/tooltip) * * API Reference: [Base UI Tooltip](https://base-ui.com/react/components/tooltip#root) */export namespace Root {  export type Actions = TooltipPrimitive.Root.Actions;  export type State = TooltipPrimitive.Root.State;  export type Props = React.ComponentProps<typeof TooltipPrimitive.Root>;  export type ChangeEventDetails = TooltipPrimitive.Root.ChangeEventDetails;  export type ChangeEventReason = TooltipPrimitive.Root.ChangeEventReason;}export function Root({ ...props }: Root.Props) {  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;}/** * An element to attach the tooltip to. * Renders a `<button>` element. * * Documentation: [Caprice UI Tooltip](https://caprice-ui.com/docs/components/tooltip) * * API Reference: [Base UI Tooltip](https://base-ui.com/react/components/tooltip#trigger) */export namespace Trigger {  export type State = TooltipPrimitive.Trigger.State;  export type Props = React.ComponentProps<typeof TooltipPrimitive.Trigger>;}export function Trigger({ ...props }: Trigger.Props) {  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;}/** * Positions the tooltip against the trigger. * Renders a `<div>` element. * * Documentation: [Caprice UI Tooltip](https://caprice-ui.com/docs/components/tooltip) * * API Reference: [Base UI Tooltip](https://base-ui.com/react/components/tooltip#positioner) */export namespace Positioner {  export type State = TooltipPrimitive.Positioner.State;  export type Props = React.ComponentProps<typeof TooltipPrimitive.Positioner>;}export function Positioner({ className, sideOffset = 10, ...props }: Positioner.Props) {  return (    <TooltipPrimitive.Portal data-slot="tooltip-portal">      <TooltipPrimitive.Positioner className={cn(className)} sideOffset={sideOffset} {...props} />    </TooltipPrimitive.Portal>  );}/** * A container for the tooltip contents. * Renders a `<div>` element. * * Documentation: [Caprice UI Tooltip](https://caprice-ui.com/docs/components/tooltip) * * API Reference: [Base UI Tooltip](https://base-ui.com/react/components/tooltip#popup) */export namespace Popup {  export type State = TooltipPrimitive.Popup.State;  export type Props = React.ComponentProps<typeof TooltipPrimitive.Popup>;}export function Popup({ className, ...props }: Popup.Props) {  return (    <TooltipPrimitive.Popup className={cn('', className)} data-slot="tooltip-popup" {...props}>      <TooltipPrimitive.Arrow className="" data-slot="tooltip-arrow" />      {props.children}    </TooltipPrimitive.Popup>  );}