Popover

A compact anchored surface for controls or information that needs interaction.

Preview

Example code

Playground

Modalmodal

Whether interaction outside the popover is blocked.

Sideside

Preferred side of the trigger before collision handling.

Alignalign

Aligns the content along the selected side.

Side offsetsideOffset

Distance in pixels between the trigger and content.

Usage

tsx

import {
  Popover,
  PopoverArrow,
  PopoverContent,
  PopoverTrigger,
} from "earthling-ui/popover";

export function Example() {
  return (
    <>
      <Popover>
        <PopoverTrigger>Delivery details</PopoverTrigger>
        <PopoverContent>
          <PopoverArrow />
          Choose where status updates should be sent.
        </PopoverContent>
      </Popover>
    </>
  );
}

Use a tooltip for a short label; use a popover when the floating content contains controls.
Keep keyboard focus order logical and provide visible labels for form fields.
Collision handling may flip the requested side when viewport space is limited.

Installation

Start with the project setup for React and Tailwind CSS 4. Both paths use the same component and theme.

Import package

Own the source

bash

npm install earthling-ui

Use the component import shown above. Package updates keep the implementation current.

API reference

Declarations from the current library build, including inherited primitive props. Playground controls above show selected options; they are not the complete API.

tsx

// Generated by dts-bundle-generator v9.5.1

import * as PopoverPrimitive from '@radix-ui/react-popover';

export declare const Popover: import("react").FC<PopoverPrimitive.PopoverProps>;
export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
export declare const PopoverContent: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
export declare const PopoverArrow: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverArrowProps & import("react").RefAttributes<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

export {};

Runtime dependencies: @radix-ui/react-popover, cnfast.

Source

Use the eject command to copy this implementation with its required helpers and project-specific imports.

View Popover implementation

tsx

"use client";

import {
  forwardRef,
  type ComponentPropsWithoutRef,
  type ComponentRef,
} from "react";
import * as PopoverPrimitive from "@radix-ui/react-popover";
import { cn } from "@/utils/cn";

const Popover = PopoverPrimitive.Root;

const PopoverTrigger = PopoverPrimitive.Trigger;

const PopoverContent = forwardRef<
  ComponentRef<typeof PopoverPrimitive.Content>,
  ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
  <PopoverPrimitive.Portal>
    <PopoverPrimitive.Content
      ref={ref}
      align={align}
      sideOffset={sideOffset}
      className={cn(
        "z-50 max-h-(--radix-popover-content-available-height) max-w-(--radix-popover-content-available-width) w-72 origin-(--radix-popover-content-transform-origin) overflow-auto rounded-xl border bg-background p-4 text-foreground shadow-md outline-none duration-150 ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 motion-reduce:animate-none",
        className,
      )}
      {...props}
    />
  </PopoverPrimitive.Portal>
));
PopoverContent.displayName = PopoverPrimitive.Content.displayName;

const PopoverArrow = forwardRef<
  ComponentRef<typeof PopoverPrimitive.Arrow>,
  ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow>
>(({ className, ...props }, ref) => (
  <PopoverPrimitive.Arrow
    asChild
    ref={ref}
    className={cn("-mt-px", className)}
    {...props}
  >
    <svg
      width="10"
      height="5"
      viewBox="0 0 10 5"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M5.0 4.35968L-1.0 -0.5L11.0 -0.5L5.0 4.35968Z"
        className="fill-background stroke-current/15"
      />
    </svg>
  </PopoverPrimitive.Arrow>
));

export { Popover, PopoverTrigger, PopoverContent, PopoverArrow };