Base Components

Tooltip

Tooltips add additional context to interactive UI elements and appear on mouse hover or keyboard focus.

Coming from Figma

In Figma the Tooltip uses Type (8 position variants), Size (2X-Small / Small / Large), Dark Mode, and Tail. In code:

Position: not a variant; use Radix's side (top / right / bottom / left) and align props on Tooltip.Content. See the Position example below.
Dark Mode: the variant prop (dark | light).
Size: the size prop (xsmall | small | medium). The naming differs from Figma (Figma's 2X-Small ≈ xsmall).
Tail: the arrow is always rendered by Tooltip.Content.

Installation

Install the following dependencies:

terminal

npm install @radix-ui/react-tooltip

Create a `tooltip.tsx` file and paste the following code into it.

/components/ui/tooltip.tsx

// AlignUI Tooltip v0.0.0
 
'use client';
 
import * as React from 'react';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
import { tv, type VariantProps } from '@/utils/tv';
 
const TooltipProvider = TooltipPrimitive.Provider;
const TooltipRoot = TooltipPrimitive.Root;
const TooltipTrigger = TooltipPrimitive.Trigger;
 
export const tooltipVariants = tv({
  slots: {
    content: [
      'z-50 shadow-tooltip',
      'animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
    ],
    arrow:
      '-translate-y-1/2 -rotate-45 border [clip-path:polygon(0_100%,0_0,100%_100%)]',
  },
  variants: {
    size: {
      xsmall: {
        content: 'rounded px-1.5 py-0.5 text-paragraph-xs',
        arrow: 'rounded-bl-sm',
      },
      small: {
        content: 'rounded-md px-2.5 py-1 text-paragraph-sm',
        arrow: 'rounded-bl-[3px]',
      },
      medium: {
        content: 'rounded-xl p-3 text-label-sm',
        arrow: 'rounded-bl-sm',
      },
    },
    variant: {
      dark: {
        content: 'bg-bg-strong-950 text-text-white-0',
        arrow: 'border-stroke-strong-950 bg-bg-strong-950',
      },
      light: {
        content:
          'bg-bg-white-0 text-text-strong-950 ring-1 ring-stroke-soft-200',
        arrow: 'border-stroke-soft-200 bg-bg-white-0',
      },
    },
  },
  compoundVariants: [
    {
      size: 'xsmall',
      variant: 'dark',
      class: {
        arrow: 'size-1.5',
      },
    },
    {
      size: 'xsmall',
      variant: 'light',
      class: {
        arrow: 'size-2',
      },
    },
    {
      size: ['small', 'medium'],
      variant: 'dark',
      class: {
        arrow: 'size-2',
      },
    },
    {
      size: ['small', 'medium'],
      variant: 'light',
      class: {
        arrow: 'size-2.5',
      },
    },
  ],
  defaultVariants: {
    size: 'small',
    variant: 'dark',
  },
});
 
const TooltipContent = React.forwardRef<
  React.ComponentRef<typeof TooltipPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> &
    VariantProps<typeof tooltipVariants>
>(
  (
    { size, variant, className, children, sideOffset = 4, ...rest },
    forwardedRef,
  ) => {
    const { content, arrow } = tooltipVariants({
      size,
      variant,
    });
 
    return (
      <TooltipPrimitive.Portal>
        <TooltipPrimitive.Content
          ref={forwardedRef}
          sideOffset={sideOffset}
          className={content({ class: className })}
          {...rest}
        >
          {children}
          <TooltipPrimitive.Arrow asChild>
            <div className={arrow()} />
          </TooltipPrimitive.Arrow>
        </TooltipPrimitive.Content>
      </TooltipPrimitive.Portal>
    );
  },
);
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
export {
  TooltipProvider as Provider,
  TooltipRoot as Root,
  TooltipTrigger as Trigger,
  TooltipContent as Content,
};