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.

Position Right Hover

Vitae congue eu consequat ac. Sed euismod nisi porta lorem. Amet consectetur adipiscing.

Painting

Vitae congue eu consequat ac. Sed euismod nisi porta lorem. Amet consectetur adipiscing.

Lamp

Vitae congue eu consequat ac. Sed euismod nisi porta lorem. Amet consectetur adipiscing.
  • Position Right Hover

    Vitae congue eu consequat ac. Sed euismod nisi porta lorem. Amet consectetur adipiscing.
  • Painting

    Vitae congue eu consequat ac. Sed euismod nisi porta lorem. Amet consectetur adipiscing.
  • Lamp

    Vitae congue eu consequat ac. Sed euismod nisi porta lorem. Amet consectetur adipiscing.

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 Right Click

Vitae congue eu consequat ac. Sed euismod nisi porta lorem. Amet consectetur adipiscing.

Velvet Pillows

Vitae congue eu consequat ac. Sed euismod nisi porta lorem. Amet consectetur adipiscing.
  • Position Right Click

    Vitae congue eu consequat ac. Sed euismod nisi porta lorem. Amet consectetur adipiscing.
  • Velvet Pillows

    Vitae congue eu consequat ac. Sed euismod nisi porta lorem. Amet consectetur adipiscing.

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.

Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Top

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Bottom

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Left

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Right

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Top

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Bottom

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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.

Padding Large

Meta Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Amet consectetur adipiscing.

Cape Town Harbour

Meta Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Amet consectetur adipiscing.
  • Padding Large

    Meta Text
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Amet consectetur adipiscing.
  • Cape Town Harbour

    Meta Text
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Amet consectetur adipiscing.

Style

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

Primary

Style Primary

Adipiscing enim eu turpis egestas pretium aenean pharetra
by Kai Nielsen

Necklace

Adipiscing enim eu turpis egestas pretium aenean pharetra
by Kai Nielsen
  • Style Primary

    Adipiscing enim eu turpis egestas pretium aenean pharetra
    by Kai Nielsen
  • Necklace

    Adipiscing enim eu turpis egestas pretium aenean pharetra
    by Kai Nielsen

Secondary

Earrings Grace

Adipiscing enim eu turpis egestas pretium aenean pharetra
by Louise Stroop

Style Secondary

Adipiscing enim eu turpis egestas pretium aenean pharetra
by Louise Stroop
  • Earrings Grace

    Adipiscing enim eu turpis egestas pretium aenean pharetra
    by Louise Stroop
  • Style Secondary

    Adipiscing enim eu turpis egestas pretium aenean pharetra
    by Louise Stroop

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


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.

Get Hundreds of YOOtheme Pro
Features All in One Package.