Components/Popover

The popover displays additional information for an object in a compact way without leaving the page. The component contains two essential elements: the control (trigger) and body (content). It can also be paired with a **Menu**, whereas the menu button would trigger a dropdown (body).

**Use a popover if:** - You need to define your own structure. - You want to show UI elements that are not available with the quick view. **Do not use a popover if:** - The objects are in a master list (in this case, the details are shown in the details area). **Use a popover if:** - You need to define your own structure. - You want to show UI elements that are not available with the quick view. - The objects are in a master list (in this case, the details are shown in the details area).

There are several variants of the popover body that can be displayed depending on the use case. | Variant | Modifier class | Description :------ | :------------- | :--------------- Header | \

As popover's triggers buttons, images, icons, and more can be used. In the example below, the **Avatar** and **Icon** act as triggers.

When the content overflows, the popover body can become scrollable. To achieve this, add element with class \

It's possible to show popover on different sides of the trigger. To do that apply the following modifier classes to the popover body element. | Modifier | Description | | :---- | :---------- | | \

It's possible to hide popover's arrow. To achieve this apply the \

This extension of Popover is used by components and patterns in the BTP area. Apply the .fd-popover--btp modifier class to .fd-popover base class. To add padding to the Popover body use the .fd-popover__body--padding modifier class together with .fd-popover__body base class. The content of the footer can be centered by using the .fd-popover__body-footer--center modifier.