diff --git a/content/modules/flow-ui/examples/onboarding/src/main/java/com/company/onboarding/view/component/popover/PopoverView.java b/content/modules/flow-ui/examples/onboarding/src/main/java/com/company/onboarding/view/component/popover/PopoverView.java
new file mode 100644
index 00000000..08923bfa
--- /dev/null
+++ b/content/modules/flow-ui/examples/onboarding/src/main/java/com/company/onboarding/view/component/popover/PopoverView.java
@@ -0,0 +1,94 @@
+package com.company.onboarding.view.component.popover;
+
+import com.company.onboarding.view.main.MainView;
+import com.vaadin.flow.component.ClickEvent;
+import com.vaadin.flow.component.button.ButtonVariant;
+import com.vaadin.flow.component.html.H3;
+import com.vaadin.flow.component.icon.VaadinIcon;
+import com.vaadin.flow.component.popover.Popover;
+import com.vaadin.flow.router.Route;
+import io.jmix.flowui.UiComponents;
+import io.jmix.flowui.component.textfield.TypedTextField;
+import io.jmix.flowui.kit.component.button.JmixButton;
+import io.jmix.flowui.view.*;
+import org.springframework.beans.factory.annotation.Autowired;
+
+@Route(value = "popover-view", layout = MainView.class)
+@ViewController("PopoverView")
+@ViewDescriptor("popover-view.xml")
+public class PopoverView extends StandardView {
+
+    // tag::basics[]
+    @ViewComponent
+    private Popover infoPopover;
+
+    // end::basics[]
+    // tag::runtimeTarget[]
+    @ViewComponent
+    private Popover emailHelpPopover;
+    @ViewComponent
+    private TypedTextField<String> emailField;
+    @Autowired
+    private UiComponents uiComponents;
+
+    // end::runtimeTarget[]
+    // tag::programmatic[]
+    @ViewComponent
+    private Popover promoCodePopover;
+
+    // end::programmatic[]
+    // tag::modal[]
+    @ViewComponent
+    private Popover renamePopover;
+    @ViewComponent
+    private H3 reportTitle;
+    @ViewComponent
+    private TypedTextField<String> titleField;
+
+    // end::modal[]
+    // tag::basics[]
+    @Subscribe(id = "closeButton", subject = "clickListener")
+    public void onCloseButtonClick(final ClickEvent<JmixButton> event) {
+        infoPopover.close();
+    }
+    // end::basics[]
+
+    // tag::runtimeTarget[]
+    @Subscribe
+    public void onInit(final InitEvent event) {
+        JmixButton helpButton = uiComponents.create(JmixButton.class);
+        helpButton.setIcon(VaadinIcon.QUESTION_CIRCLE.create());
+        helpButton.addThemeVariants(ButtonVariant.TERTIARY);
+        emailField.setSuffixComponent(helpButton);
+
+        emailHelpPopover.setTarget(helpButton);
+    }
+    // end::runtimeTarget[]
+
+    // tag::programmatic[]
+    @Subscribe(id = "promoCodeHelpButton", subject = "clickListener")
+    public void onPromoCodeHelpButtonClick(final ClickEvent<JmixButton> event) {
+        promoCodePopover.open();
+    }
+    // end::programmatic[]
+
+    // tag::modal[]
+    @Subscribe("renamePopover")
+    public void onRenamePopoverOpenedChange(final Popover.OpenedChangeEvent event) {
+        if (event.isOpened()) {
+            titleField.setValue(reportTitle.getText());
+        }
+    }
+
+    @Subscribe(id = "saveButton", subject = "clickListener")
+    public void onSaveButtonClick(final ClickEvent<JmixButton> event) {
+        reportTitle.setText(titleField.getValue());
+        renamePopover.close();
+    }
+
+    @Subscribe(id = "cancelButton", subject = "clickListener")
+    public void onCancelButtonClick(final ClickEvent<JmixButton> event) {
+        renamePopover.close();
+    }
+    // end::modal[]
+}
diff --git a/content/modules/flow-ui/examples/onboarding/src/main/resources/com/company/onboarding/menu.xml b/content/modules/flow-ui/examples/onboarding/src/main/resources/com/company/onboarding/menu.xml
index 1fb38339..3da988de 100644
--- a/content/modules/flow-ui/examples/onboarding/src/main/resources/com/company/onboarding/menu.xml
+++ b/content/modules/flow-ui/examples/onboarding/src/main/resources/com/company/onboarding/menu.xml
@@ -68,6 +68,7 @@
               title="msg://com.company.onboarding.view.component.multiselectcomboboxpicker/multiSelectComboBoxPickerView.title"/>
         <item view="MultiSelectListBoxView"
               title="msg://com.company.onboarding.view.component.multiselectlistbox/multiSelectListBoxView.title"/>
+        <item view="PopoverView" title="msg://com.company.onboarding.view.component.popover/popoverView.title"/>
         <item view="ProgressBarView" title="msg://com.company.onboarding.view.component.progressbar/progressBarView.title"/>
         <item view="PropertyFilterView"
               title="msg://com.company.onboarding.view.component.propertyfilter/propertyFilterView.title"/>
diff --git a/content/modules/flow-ui/examples/onboarding/src/main/resources/com/company/onboarding/messages_en.properties b/content/modules/flow-ui/examples/onboarding/src/main/resources/com/company/onboarding/messages_en.properties
index 53e4cb09..cd038b82 100644
--- a/content/modules/flow-ui/examples/onboarding/src/main/resources/com/company/onboarding/messages_en.properties
+++ b/content/modules/flow-ui/examples/onboarding/src/main/resources/com/company/onboarding/messages_en.properties
@@ -198,6 +198,8 @@ com.company.onboarding.view.component.validator/validatorView.title=Validators
 com.company.onboarding.view.component.valuepicker/valuePickerView.title=valuePicker
 com.company.onboarding.view.component.progressbar/progressBarView.title=progressBar
 
+com.company.onboarding.view.component.popover/popoverView.title=popover
+
 com.company.onboarding.view.component.tooltip/tooltipView.title=tooltip
 
 com.company.onboarding.view.component.treedatagrid/treeDataGridView.title=treeDataGrid
diff --git a/content/modules/flow-ui/examples/onboarding/src/main/resources/com/company/onboarding/view/component/popover/popover-view.xml b/content/modules/flow-ui/examples/onboarding/src/main/resources/com/company/onboarding/view/component/popover/popover-view.xml
new file mode 100644
index 00000000..2edeb212
--- /dev/null
+++ b/content/modules/flow-ui/examples/onboarding/src/main/resources/com/company/onboarding/view/component/popover/popover-view.xml
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<view xmlns="http://jmix.io/schema/flowui/view"
+      title="msg://popoverView.title">
+    <layout>
+        <!-- tag::basics[] -->
+        <button id="infoButton" text="About" icon="INFO_CIRCLE_O"/>
+        <popover id="infoPopover" target="infoButton" width="20em">
+            <vbox padding="false">
+                <h4 text="Onboarding"/>
+                <span text="New employees complete the onboarding steps during their first weeks."/>
+                <button id="closeButton" text="Close"/>
+            </vbox>
+        </popover>
+        <!-- end::basics[] -->
+
+        <!-- tag::runtimeTarget[] -->
+        <textField id="emailField" label="Email"/>
+        <popover id="emailHelpPopover" width="16em">
+            <span text="Use your corporate address."/>
+        </popover>
+        <!-- end::runtimeTarget[] -->
+
+        <!-- tag::hover[] -->
+        <avatar id="userAvatar" name="Alice Brown"/>
+        <popover target="userAvatar"
+                 openOnClick="false"
+                 openOnHover="true"
+                 hoverDelay="300"
+                 hideDelay="300">
+            <vbox padding="false" spacing="false">
+                <h5 text="Alice Brown"/>
+                <span text="HR manager"/>
+                <anchor href="mailto:alice@company.com" text="alice@company.com"/>
+            </vbox>
+        </popover>
+        <!-- end::hover[] -->
+
+        <!-- tag::focus[] -->
+        <passwordField id="passwordField" label="Password"/>
+        <popover target="passwordField"
+                 openOnClick="false"
+                 openOnFocus="true"
+                 position="END">
+            <span text="Use at least 8 characters, including a letter and a digit."/>
+        </popover>
+        <!-- end::focus[] -->
+
+        <!-- tag::programmatic[] -->
+        <hbox alignItems="BASELINE">
+            <textField id="promoCodeField" label="Promo code"/>
+            <button id="promoCodeHelpButton" text="Where do I find it?" themeNames="tertiary"/>
+        </hbox>
+        <popover id="promoCodePopover"
+                 target="promoCodeField"
+                 openOnClick="false"
+                 width="16em">
+            <span text="The promo code is printed on the back of your loyalty card."/>
+        </popover>
+        <!-- end::programmatic[] -->
+
+        <!-- tag::position[] -->
+        <button id="statusButton" text="Status"/>
+        <popover target="statusButton" position="END" themeNames="arrow">
+            <span text="3 of 5 steps completed"/>
+        </popover>
+        <!-- end::position[] -->
+
+        <!-- tag::modal[] -->
+        <h3 id="reportTitle" text="Quarterly report"/>
+        <button id="renameButton" text="Rename"/>
+        <popover id="renamePopover"
+                 target="renameButton"
+                 modal="true"
+                 backdropVisible="true"
+                 closeOnOutsideClick="false"
+                 width="18em">
+            <vbox padding="false">
+                <textField id="titleField" label="Title" width="100%"/>
+                <hbox>
+                    <button id="saveButton" text="Save" themeNames="primary"/>
+                    <button id="cancelButton" text="Cancel"/>
+                </hbox>
+            </vbox>
+        </popover>
+        <!-- end::modal[] -->
+    </layout>
+</view>
diff --git a/content/modules/flow-ui/images/visual-components/components/popover-basics.png b/content/modules/flow-ui/images/visual-components/components/popover-basics.png
new file mode 100644
index 00000000..9af82c58
Binary files /dev/null and b/content/modules/flow-ui/images/visual-components/components/popover-basics.png differ
diff --git a/content/modules/flow-ui/images/visual-components/components/popover-modal.png b/content/modules/flow-ui/images/visual-components/components/popover-modal.png
new file mode 100644
index 00000000..1c77976e
Binary files /dev/null and b/content/modules/flow-ui/images/visual-components/components/popover-modal.png differ
diff --git a/content/modules/flow-ui/pages/vc/components/popover.adoc b/content/modules/flow-ui/pages/vc/components/popover.adoc
new file mode 100644
index 00000000..c3b6092b
--- /dev/null
+++ b/content/modules/flow-ui/pages/vc/components/popover.adoc
@@ -0,0 +1,289 @@
+= popover
+
+[.since]
+Since Jmix 3.1
+
+`popover` is an overlay that opens next to another component, called the target. Unlike xref:vc/components/tooltip.adoc[tooltip], a popover can contain any components, such as fields, buttons and layouts, and users can work with them.
+
+[cols="1h,1", options="autowidth", grid=none, frame=none]
+|===
+|XML Element
+|`popover`
+
+|Java Class
+|`Popover`
+|===
+
+[[basics]]
+== Basics
+
+Declare `popover` in the view layout and set the `target` attribute to the id of a component:
+
+[source,xml,indent=0]
+----
+include::example$onboarding/src/main/resources/com/company/onboarding/view/component/popover/popover-view.xml[tags=basics]
+----
+
+image::visual-components/components/popover-basics.png[Popover opened under its target, align="center", width="400"]
+
+The popover does not take space in the layout. Its content is shown only when the popover opens. By default, the popover opens when the user clicks the target. It closes when the user clicks the target again, clicks outside the popover, or presses *Esc*.
+
+The popover and its content are regular components of the view. You can inject them into the view controller and subscribe to their events. In the example above, the button in the popover closes it using the `close()` method:
+
+[source,java,indent=0]
+----
+include::example$onboarding/src/main/java/com/company/onboarding/view/component/popover/PopoverView.java[tags=basics]
+----
+
+[[about-target]]
+== Target
+
+The `target` attribute contains the id of a component in the same view or fragment. The target can be declared before or after the popover. If there is no component with this id, the view fails to open with a `GuiDevelopmentException`.
+
+The `target` attribute is optional. If the target component is created in the view controller, declare the popover without `target`:
+
+[source,xml,indent=0]
+----
+include::example$onboarding/src/main/resources/com/company/onboarding/view/component/popover/popover-view.xml[tags=runtimeTarget]
+----
+
+Then set the target using the `setTarget()` method:
+
+[source,java,indent=0]
+----
+include::example$onboarding/src/main/java/com/company/onboarding/view/component/popover/PopoverView.java[tags=runtimeTarget]
+----
+
+A popover without a target does not open on user actions. If you open it with the `open()` method, it is shown in the center of the screen.
+
+[[opening-and-closing]]
+== Opening and Closing
+
+The `openOnClick`, `openOnHover` and `openOnFocus` attributes define which user actions open the popover. Only `openOnClick` is enabled by default. You can enable several of them.
+
+[[open-on-hover]]
+*Opening on Hover*
+
+The following popover opens when the user moves the pointer over an avatar:
+
+[source,xml,indent=0]
+----
+include::example$onboarding/src/main/resources/com/company/onboarding/view/component/popover/popover-view.xml[tags=hover]
+----
+
+The popover closes when the pointer leaves both the target and the popover, so the user can move the pointer to the popover and click the link in it.
+
+The `hoverDelay` attribute sets the delay before the popover opens, and `hideDelay` sets the delay before it closes. Both delays are in milliseconds, and both are 500 by default.
+
+[[open-on-focus]]
+*Opening on Focus*
+
+The following popover opens when the password field receives focus:
+
+[source,xml,indent=0]
+----
+include::example$onboarding/src/main/resources/com/company/onboarding/view/component/popover/popover-view.xml[tags=focus]
+----
+
+The popover closes when the focus leaves both the target and the popover. The `focusDelay` attribute sets the delay before the popover opens, 500 milliseconds by default.
+
+[[open-programmatically]]
+*Opening Programmatically*
+
+If all three attributes are `false`, user actions on the target do not open the popover. Open it in the view controller instead:
+
+[source,xml,indent=0]
+----
+include::example$onboarding/src/main/resources/com/company/onboarding/view/component/popover/popover-view.xml[tags=programmatic]
+----
+
+[source,java,indent=0]
+----
+include::example$onboarding/src/main/java/com/company/onboarding/view/component/popover/PopoverView.java[tags=programmatic]
+----
+
+The `open()` and `close()` methods open and close the popover, and `isOpened()` returns its current state.
+
+[[closing]]
+*Closing*
+
+However the popover was opened, a click outside it and the *Esc* key close it. Set the `closeOnOutsideClick` and `closeOnEsc` attributes to `false` to turn this off.
+
+[[about-positioning]]
+== Positioning
+
+The `position` attribute defines where the popover opens relative to the target: above (`TOP_START`, `TOP`, `TOP_END`), below (`BOTTOM_START`, `BOTTOM`, `BOTTOM_END`), before (`START_TOP`, `START`, `START_BOTTOM`) or after (`END_TOP`, `END`, `END_BOTTOM`) it. The default is `BOTTOM`. If there is not enough space on that side, the popover opens on the opposite side.
+
+The following popover opens after the button and shows an arrow that points to it:
+
+[source,xml,indent=0]
+----
+include::example$onboarding/src/main/resources/com/company/onboarding/view/component/popover/popover-view.xml[tags=position]
+----
+
+[[modal-popover]]
+== Modal Popover
+
+A modal popover works as a small dialog next to its target. When it is open, users cannot interact with the rest of the UI, and the focus stays in the popover. Set `modal="true"` to make the popover modal and `backdropVisible="true"` to dim the UI behind it.
+
+A click outside a modal popover closes it by default. The following popover sets `closeOnOutsideClick="false"`, so it stays open until the user clicks a button in it:
+
+[source,xml,indent=0]
+----
+include::example$onboarding/src/main/resources/com/company/onboarding/view/component/popover/popover-view.xml[tags=modal]
+----
+
+image::visual-components/components/popover-modal.png[Modal popover with a dimmed backdrop, align="center", width="420"]
+
+The controller fills the field when the popover opens and saves the value when the user clicks *Save*:
+
+[source,java,indent=0]
+----
+include::example$onboarding/src/main/java/com/company/onboarding/view/component/popover/PopoverView.java[tags=modal]
+----
+
+[[size-and-styling]]
+== Size and Styling
+
+The `width` and `height` attributes set the size of the popover content. Use absolute units, such as `px` or `em`. Relative units, such as `%`, give unexpected results. Without these attributes, the popover takes the size of its content. The `minWidth`, `maxWidth`, `minHeight` and `maxHeight` attributes are not supported.
+
+The popover is shown outside the view layout, so it does not support the `css` attribute. In Java, `getStyle()` throws `UnsupportedOperationException`. To style a popover, add class names to it with the xref:vc/common-attributes.adoc#classNames[classNames] attribute and define the styles in the application theme.
+
+[[variants]]
+== Theme Variants
+
+Use the xref:vc/common-attributes.adoc#themeNames[themeNames] attribute to set a component theme.
+
+[cols="1,4,1", options="header"]
+|===
+|Variant
+|Description
+|Supported By
+
+|`arrow`
+|Shows an arrow that points to the target.
+|Aura, Lumo
+
+|`no-padding`
+|Removes the padding around the content.
+|Aura, Lumo
+|===
+
+[[attributes]]
+== Attributes
+
+The following attributes are specific to `popover`:
+
+[cols="2,5,1", options="header"]
+|===
+|Name
+|Description
+|Default
+
+|[[ariaRole]]`ariaRole`
+|Sets the ARIA role of the popover, which screen readers use.
+|`dialog`
+
+|[[autofocus]]`autofocus`
+|When `true`, the popover content receives focus when the popover opens. Modal popovers do this by default.
+|`false`
+
+|[[backdropVisible]]`backdropVisible`
+|When `true`, the UI behind the popover is dimmed while the popover is open. See <<modal-popover,Modal Popover>>.
+|`false`
+
+|[[closeOnEsc]]`closeOnEsc`
+|When `true`, the *Esc* key closes the popover. See <<closing,Closing>>.
+|`true`
+
+|[[closeOnOutsideClick]]`closeOnOutsideClick`
+|When `true`, a click outside the popover closes it. See <<closing,Closing>>.
+|`true`
+
+|[[focusDelay]]`focusDelay`
+|Sets the delay in milliseconds before the popover opens when the target receives focus. See <<open-on-focus,Opening on Focus>>.
+|`500`
+
+|[[height]]`height`
+|Sets the height of the popover content. See <<size-and-styling,Size and Styling>>.
+|—
+
+|[[hideDelay]]`hideDelay`
+|Sets the delay in milliseconds before the popover closes when the pointer leaves the target and the popover. When the target loses focus, the popover closes at once. See <<open-on-hover,Opening on Hover>>.
+|`500`
+
+|[[hoverDelay]]`hoverDelay`
+|Sets the delay in milliseconds before the popover opens when the pointer moves over the target. See <<open-on-hover,Opening on Hover>>.
+|`500`
+
+|[[modal]]`modal`
+|When `true`, users cannot interact with the rest of the UI while the popover is open. See <<modal-popover,Modal Popover>>.
+|`false`
+
+|[[openOnClick]]`openOnClick`
+|When `true`, a click on the target opens the popover. See <<opening-and-closing,Opening and Closing>>.
+|`true`
+
+|[[openOnFocus]]`openOnFocus`
+|When `true`, the popover opens when the target receives focus. See <<open-on-focus,Opening on Focus>>.
+|`false`
+
+|[[openOnHover]]`openOnHover`
+|When `true`, the popover opens when the pointer moves over the target. See <<open-on-hover,Opening on Hover>>.
+|`false`
+
+|[[position]]`position`
+|Sets the position of the popover relative to the target. See <<about-positioning,Positioning>>.
+|`BOTTOM`
+
+|[[tabFocusEnabled]]`tabFocusEnabled`
+|When `true`, the user can move the focus from the target to the popover content with the *Tab* key. When `false`, *Tab* skips the popover. It has no effect on modal popovers.
+|`true`
+
+|[[target]]`target`
+|Sets the id of the target component. See <<about-target,Target>>.
+|—
+
+|[[themeNames]]`themeNames`
+|Applies one or more variants listed in <<variants,Theme Variants>>.
+|—
+
+|[[width]]`width`
+|Sets the width of the popover content. See <<size-and-styling,Size and Styling>>.
+|—
+|===
+
+The following shared attributes are supported by `popover`:
+
+xref:vc/common-attributes.adoc#id[id] -
+xref:vc/common-attributes.adoc#ariaLabel[ariaLabel] -
+xref:vc/common-attributes.adoc#ariaLabelledBy[ariaLabelledBy] -
+xref:vc/common-attributes.adoc#classNames[classNames] -
+xref:vc/common-attributes.adoc#enabled[enabled] -
+xref:vc/common-attributes.adoc#visible[visible]
+
+[[handlers]]
+== Handlers
+
+[cols="2,5", options="header"]
+|===
+|Name
+|Description
+
+|xref:vc/common-handlers.adoc#AttachEvent[`AttachEvent`]
+|Fires when the popover is attached to the UI.
+
+|xref:vc/common-handlers.adoc#DetachEvent[`DetachEvent`]
+|Fires when the popover is detached from the UI.
+
+|[[OpenedChangeEvent]]`OpenedChangeEvent`
+|Fires when the popover opens or closes. Use `isOpened()` of the event to find out which. See <<modal-popover,Modal Popover>>.
+|===
+
+== Elements
+
+A `popover` can contain any components and layouts.
+
+== See Also
+
+* https://vaadin.com/docs/v25/components/popover[Vaadin Popover documentation^]
diff --git a/content/modules/flow-ui/partials/nav.adoc b/content/modules/flow-ui/partials/nav.adoc
index 1679f8ad..2efad70e 100644
--- a/content/modules/flow-ui/partials/nav.adoc
+++ b/content/modules/flow-ui/partials/nav.adoc
@@ -58,6 +58,7 @@
 **** xref:flow-ui:vc/components/numberField.adoc[]
 **** xref:flow-ui:vc/components/passwordField.adoc[]
 **** xref:flow-ui:vc/components/pivotTable.adoc[]
+**** xref:flow-ui:vc/components/popover.adoc[]
 **** xref:flow-ui:vc/components/progressBar.adoc[]
 **** xref:flow-ui:vc/components/propertyFilter.adoc[]
 **** xref:flow-ui:vc/components/radioButtonGroup.adoc[]
diff --git a/content/modules/whats-new/pages/release-3.1.adoc b/content/modules/whats-new/pages/release-3.1.adoc
index 6f186a08..b9ee9d98 100644
--- a/content/modules/whats-new/pages/release-3.1.adoc
+++ b/content/modules/whats-new/pages/release-3.1.adoc
@@ -47,6 +47,11 @@ The new xref:flow-ui:views/view-classes.adoc#standard-read-view[read views] show
 
 Users can now xref:flow-ui:vc/layouts/sidePanelLayout.adoc#resizing[resize the `sidePanelLayout` component] at runtime by dragging the handle on the side panel's inner edge. Resizing works for horizontal and vertical positions and respects the configured minimum and maximum sizes. The xref:flow-ui:facets/settings.adoc[`settings`] facet can save and restore the size selected by the current user.
 
+[[popover-component]]
+=== Popover Component
+
+The new xref:flow-ui:vc/components/popover.adoc[popover] component is an overlay that opens next to a target component and can contain any components. You can declare it in a view or fragment descriptor and set the `target` attribute to the id of a component. The popover can open on a click, on hover or on focus, or from the view controller, and it can be modal.
+
 [[popover-renderer]]
 === Popover Renderer for Data Grid