Tooltip

A popup that appears when an element is hovered or focused, showing a hint for sighted users.

'use client';

import * as Tooltip from '@components/caprice-ui/tooltip';

export default function TooltipDemo() {
  return (
    <Tooltip.Provider>
      <Tooltip.Root>
        <Tooltip.Trigger>Hello</Tooltip.Trigger>
        <Tooltip.Positioner>
          <Tooltip.Popup>Tooltip</Tooltip.Popup>
        </Tooltip.Positioner>
      </Tooltip.Root>
    </Tooltip.Provider>
  );
}

Installation

npx shadcn@latest add @caprice/tooltip

npx shadcn@latest add @caprice/tooltip

npm install @caprice-ui/react

npm install @caprice-ui/react

Install the following dependencies:

npm install @base-ui/react lucide-react

npm install @base-ui/react lucide-react

Add a cn helper

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 };

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 };

Copy and paste the following code into your project.

'use client';

import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
import type * as React from 'react';
import { cn } from '@/lib/utils';

export const createHandle = TooltipPrimitive.createHandle;

/**
 * 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)}
        data-slot="tooltip-positioner"
        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, children, ...props }: Popup.Props) {
  return (
    <TooltipPrimitive.Popup className={cn('', className)} data-slot="tooltip-popup" {...props}>
      <TooltipPrimitive.Viewport data-slot="tooltip-viewport">{children}</TooltipPrimitive.Viewport>
    </TooltipPrimitive.Popup>
  );
}

/**
 * @deprecated Use {@link Popup} instead
 * @see {@link https://caprice-ui.com/docs/components/tooltip}
 */
export const Content = Popup;

/**
 * Displays an element positioned against the tooltip anchor.
 * 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#arrow)
 */
export namespace Arrow {
  export type State = TooltipPrimitive.Arrow.State;
  export type Props = React.ComponentProps<typeof TooltipPrimitive.Arrow>;
}

export function Arrow({ className, ...props }: Arrow.Props) {
  return (
    <TooltipPrimitive.Arrow className={cn('', className)} data-slot="tooltip-arrow" {...props} />
  );
}

'use client';import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';import type * as React from 'react';import { cn } from '@/lib/utils';export const createHandle = TooltipPrimitive.createHandle;/** * 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)}        data-slot="tooltip-positioner"        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, children, ...props }: Popup.Props) {  return (    <TooltipPrimitive.Popup className={cn('', className)} data-slot="tooltip-popup" {...props}>      <TooltipPrimitive.Viewport data-slot="tooltip-viewport">{children}</TooltipPrimitive.Viewport>    </TooltipPrimitive.Popup>  );}/** * @deprecated Use {@link Popup} instead * @see {@link https://caprice-ui.com/docs/components/tooltip} */export const Content = Popup;/** * Displays an element positioned against the tooltip anchor. * 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#arrow) */export namespace Arrow {  export type State = TooltipPrimitive.Arrow.State;  export type Props = React.ComponentProps<typeof TooltipPrimitive.Arrow>;}export function Arrow({ className, ...props }: Arrow.Props) {  return (    <TooltipPrimitive.Arrow className={cn('', className)} data-slot="tooltip-arrow" {...props} />  );}

Update the import paths to match your project setup.

Usage

import * as Tooltip from "@/components/caprice-ui/tooltip"

import * as Tooltip from "@/components/caprice-ui/tooltip"

import * as Tooltip from "@caprice-ui/react/tooltip"

import * as Tooltip from "@caprice-ui/react/tooltip"

<Tooltip.Provider>
  <Tooltip.Root>
    <Tooltip.Trigger>
      Tooltip
    </Tooltip.Trigger>
    <Tooltip.Positioner>
      <Tooltip.Popup>Tooltip Content</Tooltip.Popup>
    </Tooltip.Positioner>
  </Tooltip.Root>
</Tooltip.Provider>

'use client'; import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'; import type * as React from 'react'; import { cn } from '@/lib/utils'; export const createHandle = TooltipPrimitive.createHandle; /** * 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)} data-slot="tooltip-positioner" 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, children, ...props }: Popup.Props) { return ( <TooltipPrimitive.Popup className={cn('', className)} data-slot="tooltip-popup" {...props}> <TooltipPrimitive.Viewport data-slot="tooltip-viewport">{children}</TooltipPrimitive.Viewport> </TooltipPrimitive.Popup> ); } /** * @deprecated Use {@link Popup} instead * @see {@link https://caprice-ui.com/docs/components/tooltip} */ export const Content = Popup; /** * Displays an element positioned against the tooltip anchor. * 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#arrow) */ export namespace Arrow { export type State = TooltipPrimitive.Arrow.State; export type Props = React.ComponentProps<typeof TooltipPrimitive.Arrow>; } export function Arrow({ className, ...props }: Arrow.Props) { return ( <TooltipPrimitive.Arrow className={cn('', className)} data-slot="tooltip-arrow" {...props} /> ); }

Installation

Install the following dependencies:

Add a cn helper

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

Examples

Detached triggers

Multiple triggers

Controlled mode with multiple triggers

Animating the Tooltip

On this page

Contribute