A popover is a small non-modal dialog without dimming that opens next to a trigger element. It can contain text, input fields, and any other controls.

By default, the popover opens with a preset Medium width, but two additional sizes and the option to use a custom value are available.

Popovers with compact content open with reduced inner padding. Popovers of this size have no header or footer:

The height of the popover depends on its content. The recommended maximum height is 480px (may be increased at the designer's discretion).

To flexibly control popover padding based on its content, reset the default values using [defaultPaddings]="false". Then apply inner padding (padding) directly in the template of the content area:

The arrow extending from the popover can be hidden, which allows the popover to be positioned closer to the trigger element.

The popover has an additional kbqPopoverOffset parameter that controls the offset of the popover relative to the trigger element.

Consider the context in which the popover appears. Configure the alignment so that the popover does not obscure elements that may be needed.

The arrow is positioned at the center of the popover and points to the middle of the trigger element.

The popover aligns with the edge of the trigger element; the arrow is at a fixed distance from the edge of the popover. If the trigger element is too small, the arrow aligns with its center.

By default, the popover does not close when the page scrolls and scrolls along with the page, remaining at the position from which it was opened.

The popover can be configured to close when the page scrolls; which behavior to choose is up to the designer.

The popover can be used without a header and footer — these are optional elements.

The size of the vertical inner padding in the content area depends on the presence of a header and footer. Without a header, the top padding increases. Without a footer, the bottom padding increases.

The title can be moved to the content area instead of placing it in a separate header panel. This approach works well when there is no scrolling in the popover.

The close button can be placed in the header or in the top right corner when there is no header panel. This is a way to eliminate a footer with a single "Close" button.

By default, the popover is hidden beneath the horizontal Navbar and Topbar in other cases, it appears above adjacent elements.

To prevent the popover from overlapping a required element during scrolling and instead have it hidden beneath it, adjust its position using a custom z-index or offset parameters.

When a short text without interactive elements needs to be shown in a popup, use a tooltip.

A Dropdown is suitable for showing a list of commands. Dropdown does not support Tab navigation inside the dropdown menu. A popover, on the other hand, works like a modal window: when opened, it captures focus and navigates through the window's content.