Popover

An overlay component that floats complex descriptive content or micro-forms relative to a reference trigger.
For more information on this component configuration, visit Radix UI

Placement

Use the side prop on the Popover.Content to set the placement of the component. Values can include top, right, bottom, left.

Sizes

Use the popover-content-{size} class to control the component size.

Size values can include:smmd.

For more information on all available sizing utilities, visit Tailwind

Customizing

globals.css


:root {
  --ex-popover-z-index: 40;
 
  --ex-popover-font-size-sm: var(--text-xs);
  --ex-popover-font-size-md: var(--text-sm);
  --ex-popover-font-size-lg: var(--text-base);
 
  --ex-popover-max-w-sm: var(--container-3xs);
  --ex-popover-max-w-md: var(--container-2xs);
 
  --ex-popover-radius-sm: var(--radius-sm);
  --ex-popover-radius-md: var(--radius-sm);
 
  --ex-popover-shadow-sm: var(--shadow-sm);
  --ex-popover-shadow-md: var(--shadow-sm);
 
  --ex-popover-section-gap-x-sm: calc(var(--spacing) * 2);
  --ex-popover-section-gap-x-md: calc(var(--spacing) * 2.5);
  --ex-popover-section-gap-x-lg: calc(var(--spacing) * 3);
 
  --ex-popover-section-gap-y-sm: calc(var(--spacing) * 2);
  --ex-popover-section-gap-y-md: calc(var(--spacing) * 2);
  --ex-popover-section-gap-y-lg: calc(var(--spacing) * 2);
 
  --ex-popover-section-px-sm: calc(var(--spacing) * 4);
  --ex-popover-section-px-md: calc(var(--spacing) * 5);
 
  --ex-popover-section-py-sm: calc(var(--spacing) * 4);
  --ex-popover-section-py-md: calc(var(--spacing) * 5);
 
  --ex-popover-title-font-family: var(--font-sans);
  --ex-popover-title-font-weight: var(--font-weight-semibold);
 
  --ex-popover-title-font-size-sm: var(--text-sm);
  --ex-popover-title-font-size-md: var(--text-base);
 
  --ex-popover-description-font-family: var(--font-sans);
  --ex-popover-description-font-weight: var(--font-weight-normal);
  --ex-popover-description-opacity: var(--ex-options-opacity-muted);
 
  --ex-popover-description-font-size-sm: var(--text-xs);
  --ex-popover-description-font-size-md: var(--text-sm);
 
  --ex-popover-arrow-height-sm: calc(var(--spacing) * 1.75);
  --ex-popover-arrow-height-md: calc(var(--spacing) * 1.75);
 
  --ex-popover-arrow-width-sm: calc(var(--spacing) * 3.5);
  --ex-popover-arrow-width-md: calc(var(--spacing) * 3.5);
}

API

For more information on this component configuration, visit Radix UI

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`defaultOpen`	`boolean`	`false`
`modal`	`boolean`	`false`
`open`	`boolean`	`false`
`onOpenChange`	`function`

Popover Trigger

Element	Selector
`Popover.Trigger`	`.ex-popover-trigger`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Popover Anchor

Element	Selector
`Popover.Trigger`	`.ex-popover-anchor`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Prop	Type	Default
`container`	`HTMLElement`	`document.body`
`forceMount`	`boolean`	`false`

Element	Selector
`Popover.Content`	`.ex-popover-content`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`align`	`enum of ["start", "center", "end"]`	`center`
`alignOffset`	`number`	`0`
`arrowPadding`	`number`	`0`
`forceMount`	`boolean`	`false`
`hideWhenDetached`	`boolean`	`false`
`side`	`enum of ["top", "right", "bottom", "left"]`	`bottom`
`sideOffset`	`number`	`0`
`sticky`	`enum of ["always", "partial"]`	`partial`

Element	Selector
`Popover.Section`	`.ex-popover-section`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Element	Selector
`Popover.Title`	`.ex-popover-title`

Prop	Type	Default
`as`	`ElementType`	`h4`
`asChild`	`boolean`	`false`

Element	Selector
`Popover.Description`	`.ex-popover-description`

Prop	Type	Default
`as`	`ElementType`	`p`
`asChild`	`boolean`	`false`

Element	Selector
`Popover.Arrow`	`.ex-popover-arrow`

Prop	Type	Default
`asChild`	`boolean`	`false`

Element	Selector
`Popover.Close`	`.ex-popover-close`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Popover

Placement

Sizes

Customizing

API

Popover

Popover Trigger

Popover Anchor

Popover Portal

Popover Content

Popover Section

Popover Title

Popover Description

Popover Arrow

Popover Close