diff --git a/packages/main/src/components/ObjectPage/ObjectPage.mdx b/packages/main/src/components/ObjectPage/ObjectPage.mdx
index 124610cc9a1..343551cb827 100644
--- a/packages/main/src/components/ObjectPage/ObjectPage.mdx
+++ b/packages/main/src/components/ObjectPage/ObjectPage.mdx
@@ -64,8 +64,6 @@ This component exposes public methods. You can use them directly on the instance
-# More Examples
-
## ObjectPage with IllustratedMessage (`UnableToLoad`) placeholder
@@ -90,6 +88,10 @@ To render a single section in fullscreen mode, set its height to `100%`.
```
+## Opening popover components by pressing an action
+
+Please see the [Docs](?path=/docs/layouts-floorplans-toolbar--docs#open-popovers-with-toolbarbutton) of the `Toolbar` component.
+
## Legacy Toolbar Support
The ObjectPage still supports the old (React-only) `Toolbar` implementation. Please only use this toolbar if your app is dependent on some features the `Toolbar` web component is currently not offering.
diff --git a/packages/main/src/webComponents/DynamicPage/DynamicPage.mdx b/packages/main/src/webComponents/DynamicPage/DynamicPage.mdx
index f4e9d093384..7b7b8bfe87d 100644
--- a/packages/main/src/webComponents/DynamicPage/DynamicPage.mdx
+++ b/packages/main/src/webComponents/DynamicPage/DynamicPage.mdx
@@ -112,4 +112,8 @@ function DynamicPageWithStickyContent(props) {
}
```
+## Opening popover components by pressing an action
+
+Please see the [Docs](?path=/docs/layouts-floorplans-toolbar--docs#open-popovers-with-toolbarbutton) of the `Toolbar` component.
+
diff --git a/packages/main/src/webComponents/Toolbar/Toolbar.mdx b/packages/main/src/webComponents/Toolbar/Toolbar.mdx
index 95454722c4f..fb17425020d 100644
--- a/packages/main/src/webComponents/Toolbar/Toolbar.mdx
+++ b/packages/main/src/webComponents/Toolbar/Toolbar.mdx
@@ -18,6 +18,47 @@ import * as ComponentStories from './Toolbar.stories';
+## Opening Popovers via ToolbarButton
+
+Since the `ToolbarButton` is an [abstract UI5 web component](?path=/docs/knowledge-base-faq--docs#what-are-abstract-ui5-web-components), the opener of the `Popover` needs the DOM reference of the actual element to position the popover correctly.
+Starting with v2.5.0 of `@ui5/webcomponents(-react)`, the `detail` property of the `ToolbarButton`'s click handler now includes a `targetRef` property, which can be used as the opener.
+
+
+
+### Example Code
+
+```tsx
+function ToolbarWithPopover() {
+ const [popoverOpen, setPopoverOpen] = useState(false);
+ const popoverRef = useRef(null);
+ return (
+ <>
+
+ {
+ const { targetRef } = e.detail;
+ if (popoverRef.current) {
+ popoverRef.current.opener = targetRef;
+ setPopoverOpen(true);
+ }
+ }}
+ text="Open Popover"
+ />
+
+ {
+ setPopoverOpen(false);
+ }}
+ >
+ Content
+
+ >
+ );
+}
+```
+
{SubcomponentsSection}
## ToolbarButton
diff --git a/packages/main/src/webComponents/Toolbar/Toolbar.stories.tsx b/packages/main/src/webComponents/Toolbar/Toolbar.stories.tsx
index 70b66f47b43..7e9a7a11f13 100644
--- a/packages/main/src/webComponents/Toolbar/Toolbar.stories.tsx
+++ b/packages/main/src/webComponents/Toolbar/Toolbar.stories.tsx
@@ -1,5 +1,8 @@
import type { Meta, StoryObj } from '@storybook/react';
import ToolbarAlign from '@ui5/webcomponents/dist/types/ToolbarAlign.js';
+import { useRef, useState } from 'react';
+import { Popover } from '../Popover/index.js';
+import type { PopoverDomRef } from '../Popover/index.js';
import { ToolbarButton } from '../ToolbarButton/index.js';
import { ToolbarSelect } from '../ToolbarSelect/index.js';
import { ToolbarSelectOption } from '../ToolbarSelectOption/index.js';
@@ -43,3 +46,36 @@ export const Default: Story = {
)
};
+
+export const OpenPopover: Story = {
+ name: 'Opening Popovers via ToolbarButton',
+ render(args) {
+ const [popoverOpen, setPopoverOpen] = useState(false);
+ const popoverRef = useRef(null);
+ return (
+ <>
+
+ {
+ const { targetRef } = e.detail;
+ if (popoverRef.current) {
+ popoverRef.current.opener = targetRef;
+ setPopoverOpen(true);
+ }
+ }}
+ text="Open Popover"
+ />
+
+ {
+ setPopoverOpen(false);
+ }}
+ >
+ Content
+
+ >
+ );
+ }
+};