Popover

You might be looking for:

Tooltip
A short hover or focus label — no interactive content.
Hover Card
A richer preview on hover — name, type, extra lines.
Info Callout
An info icon that opens a title and description.
Toast
A short message that appears, then dismisses itself.

Playground

Title

Description

Side

Align

<Popover> <PopoverTrigger asChild> <Button variant="outline">Account</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader> <PopoverTitle>Account</PopoverTitle> <PopoverDescription>Signed-in session and linked devices.</PopoverDescription> </PopoverHeader> <Button size="sm">Manage</Button> </PopoverContent></Popover>

Usage

import { Button } from "@sophic/portal-ui/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@sophic/portal-ui/components/ui/popover";

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Account</Button>
  </PopoverTrigger>
  <PopoverContent align="start">
    <PopoverHeader>
      <PopoverTitle>Account</PopoverTitle>
      <PopoverDescription>
        Signed-in session and linked devices.
      </PopoverDescription>
    </PopoverHeader>
    <Button size="sm">Manage</Button>
  </PopoverContent>
</Popover>

PopoverAnchor is also exported when the surface should attach to something other than the trigger.

Props

Popover, PopoverTrigger, and PopoverAnchor pass every prop through to their Radix counterparts (open, onOpenChange, asChild, …). The content part below adds defaults we document.

PopoverContent

Prop

Type

Default

Changelog

4 October 2026 — Frost via --popover / --popover-blur. Full notes
30 September 2026 — “You might be looking for” includes Toast. Full notes
25 September 2026 — “You might be looking for” includes Info Callout. Full notes
19 August 2026 — Playground exposes align (start / center / end) next to side. Full notes
19 August 2026 — Shared --floating-surface-shadow elevation token. Full notes
19 August 2026 — Docs page added (was in the library undocumented). Full notes
19 August 2026 — “You might be looking for” map to Tooltip and Hover Card. Full notes
19 August 2026 — Styles live in a CSS module; look unchanged. Full notes