Popover

A 320px card anchored to a trigger by a tail on one of twelve edge positions, with a line of guidance, a dismiss button, a step count and Back / Next. Figma calls it the Context Popover; its Type names the tail's edge.

import { ContextPopover, FlatButton } from '@orvain/react';
 
<ContextPopover
  open={open}
  onOpenChange={() => setOpen(false)}
  title="Welcome to Orvain"
  description="Use the sidebar to switch between projects."
  step={`${step} of 4`}
  onBack={() => setStep((s) => Math.max(1, s - 1))}
  onNext={() => setStep((s) => Math.min(4, s + 1))}
  backDisabled={step === 1}
  nextDisabled={step === 4}
  trigger={<FlatButton label="Toggle popover" onClick={() => setOpen(!open)} />}
/>

Add an open Orvain Popover on a “Show tip” trigger, placed top left with a tail and a close icon, reading “Pin a file to keep it at the top of every project.”, with “1 of 4”, “Back” and “Next”.

Orvain MCPIncluded with the library

When to use#

For a guided tour or a one-off tip attached to a specific control.
For short, optional content next to the thing it explains, that people can dismiss.

When not to use

Use a Tooltip for a one-line label on hover or focus.
Use a Modal when the choice must be made before anything else.

Anatomy#

1Card

320 wide (312 beside a side tail), radius 16, a subtle hairline inside, 0 16 32 -12 of shadow.

2Tail

A 16×8 notch 32px in from its edge's start, in the centre or 32px from the end, pointing at the trigger.

3Content

Medium 14 copy in #6d6d6d, 20px in, with a 28px close button; a hairline below.

4Footer

68 tall: the step count, then Back (outlined) and Next (brand), 40px each; the last step says Done.

States#

Type

Top, Bottom, Left or Right edge, each at start, centre or end.

Fitting

Near an edge the card shifts in and the tail slides to keep pointing at the trigger; a side placement with no room flips, then opens below.

Tail, Dismiss icon, Buttons

Each can be turned off.

First and last step

Back is disabled on the first; Next becomes Done on the last.

Source#

Preview – final code pending

The Popover is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks

popovers dropdowns