Popover

A small floating panel anchored to a trigger.

Overview

Wraps Base UI's Popover, so anchoring, collision handling, dismissal (Escape, outside press) and the focus model come from a maintained primitive. The marketing site uses it for hover previews: the use-case list opens one beside each line.

tsx

import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverTitle,
  PopoverTrigger,
} from "@rogo-technologies/brand/popover";

<Popover>
  <PopoverTrigger openOnHover delay={90} closeDelay={80}>
    Investment Banking
  </PopoverTrigger>
  <PopoverContent side="right" sideOffset={28}>
    <PopoverTitle>Investment Banking</PopoverTitle>
    <PopoverDescription>Pitch-ready analysis from filings and transcripts.</PopoverDescription>
  </PopoverContent>
</Popover>;

Hover is a trigger prop

openOnHover, delay and closeDelay belong on PopoverTrigger, not on Popover: Base UI scopes hover intent per trigger, so a root-level prop silently does nothing. Base UI also opens the panel when the trigger takes keyboard focus, which is what keeps a hover-only affordance reachable.

On a hover preview, pass initialFocus={false} and finalFocus={false}. Otherwise focus moves into the panel when it opens, which strands a keyboard reader inside a panel they never asked to enter.

Content is one part

PopoverContent composes Base UI's portal, positioner and popup, whose order is load-bearing. It takes the positioning props (side, align, sideOffset, alignOffset, collisionPadding, collisionAvoidance) and forwards the rest to the popup; the ref lands on the popup.

Use collisionAvoidance={{ side: "shift", align: "shift", fallbackAxisSide: "none" }} when the panel must stay on the side you asked for. The default flips it to the opposite side when space runs out, which on the use-case list would drop the panel on top of the headline.

Always give it a title

PopoverTitle is what a screen reader announces when the panel opens. When the design has no visible heading, keep the element and hide it with sr-only rather than dropping it.

Elevation

The panel carries shadow-marketing-panel, which bakes its 1px edge into the shadow. Never add a border or ring on top, since that draws the edge twice and reads washed out.

PreviousNavigation Menu

NextSeparator Dot