Components

Popover

An anchored surface for interactive controls and supporting details that must reach every user.

Anatomy

Compose the trigger, portal, positioner, and popup. Add a title and description when the content needs an announced name and summary.

tsx

<Popover.Root>
  <Popover.Trigger render={<Button>Repository access</Button>} />
  <Popover.Portal>
    <Popover.Positioner>
      <Popover.Popup>
        <Popover.Arrow />
        <Popover.Title>Repository access</Popover.Title>
        <Popover.Description>
          Visible to organization members.
        </Popover.Description>
        <Status tone="success">Connected</Status>
      </Popover.Popup>
    </Popover.Positioner>
  </Popover.Portal>
</Popover.Root>

Content and semantics

Use Popover for information or controls that need focus, keyboard, touch, and screen-reader access. Use Tooltip only for a short visual label whose trigger is already independently named.