Overlays & Data

Popover

An anchored floating panel — owns positioning, not the trigger or content. The panel is never narrower than its trigger; set display: block on the popover for a trigger that fills its row.

fandry-popover

Example

Link to section Example

Custom colors and parts

Link to section Custom colors and parts

The same component with a few --fd-* tokens set around it and its parts restyled. The code is under Parts below.

Props

Link to section Props

Prop	Type	Default	Description
`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'bottom'`	Side of the trigger the panel opens on. It opens on the opposite side instead when it would run off the viewport and that side has more room.
`align`	`'start' \| 'end'`	`'start'`	Which edge of the trigger the panel aligns to, for 'top'/'bottom' placement.
`open`	`boolean`	`false`	Open state (consumer-controlled via ontoggle).

Parts

Link to section Parts

Style the elements inside the component from your own CSS with ::part(). Every fandry component renders in native shadow DOM, so parts work on LWR and Salesforce alike. For colors, spacing, radius and type across many components, set the --fd-* tokens instead. The code for the "Custom colors and parts" example above:

Part	Description
`trigger`	The wrapper of the trigger slot.
`panel`	The surface that opens: a dropdown's list, a popover, a tooltip, a dialog, a loading overlay's box.

<!-- template -->
<div class="brand row">
  <fandry-popover placement="bottom">
    <fandry-button slot="trigger" variant="secondary">Delivery options</fandry-button>
    <fandry-text size="sm">Standard: 3 to 5 days. Express: next day.</fandry-text>
  </fandry-popover>
</div>

/* css */
/* Scoped to this demo. Set the same --fd-* tokens on :root to theme
   every fandry-* component on the site. */
.brand {
  --fd-radius-md: 1rem;
}

fandry-popover::part(panel) {
  padding: 1rem;
  border-top: 4px solid hsl(160 84% 26%);
  box-shadow: 0 12px 32px hsl(160 40% 20% / 0.18);
}

Code

Link to section Code

<fandry-popover placement="bottom" open={isOpen} ontoggle={handleToggle}>
  <fandry-button slot="trigger" variant="secondary">Actions</fandry-button>
  <div>Popover content</div>
</fandry-popover>