Popover

The Popover element displays an image with markers which open popovers. The element itself has an Image field while its items have a Title, Meta, Content, Image and Link fields.

Makers and Mode

Set the horizontal and vertical position of the marker for each item. Choose whether the popover opens when clicking the marker or hovering it.

Position

Position the popover to the top, bottom, left or right in regards to its marker. Each item can have a different position. If the popover doesn't fit the viewport, it will flip automatically.

Width and Padding

Set the width for the popover in pixels. Define the padding between the popover card and its content. Optionally, the image can be aligned without any padding.

Style

In addition to the default style, the popover comes in primary and secondary card styles.

Primary

Secondary

Link

There are various options to link the Popover element. Either link the title, image and button separately or link the whole card. Additionally, set a hover style for the title. The style is kept even if the whole card is linked.

Link Title and Image

Link Panel

Link All

More Settings

Options for the different content fields are very similar across all elements. They are described in the corresponding Headline, Text, Image and Button element documentation.

Popover

Position Right Hover

Painting

Lamp

Makers and Mode

Position Right Click

Velvet Pillows

Position

Left

Right

Top

Bottom

Width and Padding

Padding Large

Cape Town Harbour

Style

Primary

Style Primary

Necklace

Secondary

Earrings Grace

Style Secondary

Link

Link Title and Image

Link Title Image

Nike Sport

Link Panel

Link Panel

Travel Backpack

Link All

OUAI Hair Mask

Link All

More Settings

LOEWE OLED 5

Padding Small