Docs

Documentation versions (currently viewingVaadin 24)

Popover

Styling API reference for the Popover component.

Style Properties

The following style properties can be used in CSS stylesheets to customize the appearance of this component.

To apply values to these properties globally in your application UI, place them in a CSS block using the html {…​} selector. See Lumo Style Properties for more information on style properties.

Feature Property Default Value

Arrow size

--vaadin-popover-arrow-size

0.5rem

Top offset

--vaadin-popover-offset-top

var(--lumo-space-xs)

Bottom offset

--vaadin-popover-offset-bottom

var(--lumo-space-xs)

Start offset

--vaadin-popover-offset-start

var(--lumo-space-xs)

End offset

--vaadin-popover-offset-end

var(--lumo-space-xs)

CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the Styling documentation for more details on how to style components.

Root element

vaadin-popover-overlay

States

Non-modal

vaadin-popover-overlay[modeless]

Parts

Modality curtain (backdrop)

vaadin-popover-overlay::part(backdrop)

Popover surface

vaadin-popover-overlay::part(overlay)

Content wrapper

vaadin-popover-overlay::part(content)

Arrow element

vaadin-popover-overlay::part(arrow)

Style Variants

Arrow

vaadin-popover[theme~="arrow"]