Popover

The Popover component provides a simple way to add popovers.

Cover page

Full-page cover

This popover uses data-js-popover-cover to cover the whole viewport instead of being placed relative to the trigger or viewport edges.

Viewport positioning

I'm a popover

This is a card, inside a popover. I need to make sure there is a set width for my container or it wont work because of how container queries operate.

I'm a popover

This is a card, inside a popover. I need to make sure there is a set width for my container or it wont work because of how container queries operate.

I'm a popover

This is a card, inside a popover. I need to make sure there is a set width for my container or it wont work because of how container queries operate.

I'm a popover

This is a card, inside a popover. I need to make sure there is a set width for my container or it wont work because of how container queries operate.

I'm a popover

This is a card, inside a popover. I need to make sure there is a set width for my container or it wont work because of how container queries operate.

I'm a popover

This is a card, inside a popover. I need to make sure there is a set width for my container or it wont work because of how container queries operate.

I'm a popover

This is a card, inside a popover. I need to make sure there is a set width for my container or it wont work because of how container queries operate.

I'm a popover

This is a card, inside a popover. I need to make sure there is a set width for my container or it wont work because of how container queries operate.

I'm a popover

This is a card, inside a popover. I need to make sure there is a set width for my container or it wont work because of how container queries operate.

Relative positioning

I'm a popover

This is a card, inside a popover. I need to make sure there is a set width for my container or it wont work because of how container queries operate.

I'm a popover

This is a card, inside a popover. I need to make sure there is a set width for my container or it wont work because of how container queries operate.

I'm a popover

This is a card, inside a popover. I need to make sure there is a set width for my container or it wont work because of how container queries operate.

I'm a popover

This is a card, inside a popover. I need to make sure there is a set width for my container or it wont work because of how container queries operate.

I'm a popover

This is a card, inside a popover. I need to make sure there is a set width for my container or it wont work because of how container queries operate.

I'm a popover

This is a card, inside a popover. I need to make sure there is a set width for my container or it wont work because of how container queries operate.

I'm a popover

This is a card, inside a popover. I need to make sure there is a set width for my container or it wont work because of how container queries operate.

I'm a popover

This is a card, inside a popover. I need to make sure there is a set width for my container or it wont work because of how container queries operate.

I'm a popover

This is a card, inside a popover. I need to make sure there is a set width for my container or it wont work because of how container queries operate.

Using Backdrop

I'm a popover

This is a card, inside a popover. I need to make sure there is a set width for my container or it wont work because of how container queries operate.

Animation

Fade animation

This popover uses the fade animation variant. It fades in and out with a subtle scale transition.

Slide up

This popover slides upward from below the trigger.

Slide down

This popover slides downward from above the trigger.

Slide left

This popover slides in from the left.

Slide right

This popover slides in from the right.

API

Parameter Default Type Description
id
null ?string -
type
auto string -
horizontalPlacement
null ?string -
verticalPlacement
null ?string -
relative
false boolean -
backdrop
false boolean -
animation
fade string -

CSS API

Variable Default Type Values Description
--c-popover--color--alpha
var(--color--alpha) rgba - Used for overlays. Includes opacity — set both color and alpha together.