styling.adoc

title	Styling
page-title	How to style the Popover component | Vaadin components
description	Styling API reference for the Popover component.
meta-description	Style the Vaadin Popover component to align it with your application's design requirements.
order	50

Popover Styling

Style Variants

Popover supports the following style variants.

Variant	Description	Supported by
arrow	Makes the arrow visible	Aura, Lumo
no-padding	Used to remove the content area’s built-in padding	Aura, Lumo

../_styling-section-theming-props.adoc

Property	Supported by
--vaadin-popover-arrow-border-radius	Aura, Lumo
--vaadin-popover-arrow-size	Aura, Lumo
--vaadin-popover-background	Aura
--vaadin-popover-border-color	Aura
--vaadin-popover-border-radius	Aura
--vaadin-popover-border-width	Aura
--vaadin-popover-offset-bottom	Aura, Lumo
--vaadin-popover-offset-end	Aura, Lumo
--vaadin-popover-offset-start	Aura, Lumo
--vaadin-popover-offset-top	Aura, Lumo
--vaadin-popover-padding	Aura
--vaadin-popover-shadow	Aura
--vaadin-popover-text-color	Aura
--vaadin-overlay-backdrop-background	Aura

../_styling-section-intros.adoc

Root element

vaadin-popover

States

Modal

vaadin-popover[modal]

With backdrop

vaadin-popover[with-backdrop]

Parts

Modality curtain (backdrop)

vaadin-popover::part(backdrop)

Popover surface

vaadin-popover::part(overlay)

Content wrapper

vaadin-popover::part(content)

Arrow element

vaadin-popover::part(arrow)

Style Variants

Arrow

vaadin-popover[theme~="arrow"]