Popover SAP SE Displays additional information for an object in a compact way. <h3>Overview</h3> The popover displays additional information for an object in a compact way and without leaving the page. The popover can contain various UI elements such as fields, tables, images, and charts. It can also include actions in the footer. <h3>Structure</h3> The popover has three main areas: <ul> <li>Header (optional) - with a back button and a title</li> <li>Content - holds all the controls</li> <li>Footer (optional) - with additional action buttons</li> </ul> <h4>Guidelines</h4> <ul> <li>Do not overlap popovers.</li> <li>You can determine the {@link sap.m.PlacementType placement} of the popover relative to the control that opens it.</li> <li>Ensure that the content has a basic design and shows only the most important information.</li> </ul> <h3>Usage</h3> <h4>When to use:</h4> <ul> <li>You need to define your own structure of controls within the popover.</li> </ul> <h4>When not to use:</h4> <ul> <li>The {@link sap.m.QuickView QuickView} is more appropriate for your use case.</li> </ul> <h3>Responsive Behavior</h3> The popover is closed when the user clicks or taps outside the popover or selects an action within the popover. You can prevent this with the <code>modal</code> property. The popover can be resized when the <code>resizable</code> property is enabled. When using the sap.m.Popover in Sap Quartz theme, the breakpoints and layout paddings could be determined by the container's width. To enable this concept and add responsive paddings to an element of the Popover control, you may add the following classes depending on your use case: <code>sapUiResponsivePadding--header</code>, <code>sapUiResponsivePadding--subHeader</code>, <code>sapUiResponsivePadding--content</code>, <code>sapUiResponsivePadding--footer</code>. <ul> <li>{@link sap.m.Popover} is <u>not</u> responsive on mobile devices - it will always be rendered as a popover and you have to take care of its size and position.</li> <li>{@link sap.m.ResponsivePopover} is adaptive and responsive. It renders as a dialog with a close button in the header on phones, and as a popover on tablets.</li> </ul> sap.ui.core/Control This is the information about on which side will the popover be placed at. Possible values are sap.m.PlacementType.Left, sap.m.PlacementType.Right, sap.m.PlacementType.Top, sap.m.PlacementType.Bottom, sap.m.PlacementType.Horizontal, sap.m.PlacementType.HorizontalPreferredLeft, sap.m.PlacementType.HorizontalPreferredRight, sap.m.PlacementType.Vertical, sap.m.PlacementType.VerticalPreferredTop, sap.m.PlacementType.VerticalPreferredBottom, sap.m.PlacementType.Auto. The default value is sap.m.PlacementType.Right. Setting this property while popover is open won't cause any rerendering of the popover, but it will take effect when it's opened again. If a header should be shown at the top of the popover. Title text appears in the header. This property will be ignored when showHeader is set to false. If the popover will not be closed when tapping outside the popover. It also blocks any interaction with the background. The default value is false. The offset for the popover placement in the x axis. It's with unit pixel. The offset for the popover placement in the y axis. It's with unit pixel. Whether Popover arrow should be visible Set the width of the content area inside Popover. When controls which adapt their size to the parent control are added directly into Popover, for example sap.m.Page control, a size needs to be specified to the content area of the Popover. Otherwise, Popover control isn't able to display the content in the right way. This values isn't necessary for controls added to Popover directly which can decide their size by themselves, for exmaple sap.m.List, sap.m.Image etc., only needed for controls that adapt their size to the parent control. Sets the minimum width of the content area inside popover. Set the height of the content area inside Popover. When controls which adapt their size to the parent control are added directly into Popover, for example sap.m.Page control, a size needs to be specified to the content area of the Popover. Otherwise, Popover control isn't able to display the content in the right way. This values isn't necessary for controls added to Popover directly which can decide their size by themselves, for exmaple sap.m.List, sap.m.Image etc., only needed for controls that adapt their size to the parent control. This property is deprecated. Please use properties verticalScrolling and horizontalScrolling instead. If you still use this property it will be mapped on the new properties verticalScrolling and horizontalScrolling. This property is deprecated. Please use properties verticalScrolling and horizontalScrolling instead. If you still use this property it will be mapped on the new properties verticalScrolling and horizontalScrolling. This property indicates if user can scroll vertically inside popover when the content is bigger than the content area. However, when scrollable control (sap.m.ScrollContainer, sap.m.Page) is in the popover, this property needs to be set to false to disable the scrolling in popover in order to make the scrolling in the child control work properly. Popover detects if there's sap.m.NavContainer, sap.m.Page, or sap.m.ScrollContainer as direct child added to Popover. If there is, Popover will turn off scrolling by setting this property to false automatically ignoring the existing value of this property. This property indicates if user can scroll horizontally inside popover when the content is bigger than the content area. However, when scrollable control (sap.m.ScrollContainer, sap.m.Page) is in the popover, this property needs to be set to false to disable the scrolling in popover in order to make the scrolling in the child control work properly. Popover detects if there's sap.m.NavContainer, sap.m.Page, or sap.m.ScrollContainer as direct child added to Popover. If there is, Popover will turn off scrolling by setting this property to false automatically ignoring the existing value of this property. Whether bouncing is enabled. This parameter is obsolete and has no effect. Whether resize option is enabled. *Note:* This property is effective only on Desktop Do not use directly on Popover while in experimental mode! Specifies the aria-modal of the Popover. Specifies the Title alignment (theme specific). If set to <code>TitleAlignment.Auto</code>, the Title will be aligned as it is set in the theme (if not set, the default value is <code>center</code>); Other possible values are <code>TitleAlignment.Start</code> (left or right depending on LTR/RTL), and <code>TitleAlignment.Center</code> (centered) This event will be fired after the popover is opened. This refers to the control which opens the popover. This event will be fired after the popover is closed. This refers to the control which opens the popover. This event will be fired before the popover is opened. This refers to the control which opens the popover. This event will be fired before the popover is closed. This refers to the control which opens the popover. The content inside the popover. Any control that needed to be displayed in the header area. When this is set, the showHeader property is ignored, and only this customHeader is shown on the top of popover. When subHeader is assigned to Popover, it's rendered directly after the main header if there is, or at the beginning of Popover when there's no main header. SubHeader is out of the content area and won't be scrolled when content's size is bigger than the content area's size. This is optional footer which is shown on the bottom of the popover. This is the hidden aggregation for managing the internally created header. BeginButton is shown at the left side (right side in RTL mode) inside the header. When showHeader is set to false, the property is ignored. EndButton is always shown at the right side (left side in RTL mode) inside the header. When showHeader is set to false, the property is ignored. LeftButton is shown at the left edge of the bar in iOS, and at the right side of the bar for the other platforms. Please set this to null if you want to remove the left button from the bar. And the button is only removed from the bar, not destroyed. When showHeader is set to false, this property will be ignored. This property has been deprecated since 1.15.1. Please use the beginButton instead. RightButton is always shown at the right edge of the bar. Please set this to null if you want to remove the right button from the bar. And the button is only removed from the bar, not destroyed. When showHeader is set to false, this property will be ignored. This property has been deprecated since 1.15.1. Please use the endButton instead. Focus on the popover is set in the sequence of <code>beginButton</code> and <code>endButton</code>, when available. But if a control other than these two buttons needs to get the focus, set the <code>initialFocus</code> with the control which should be focused on. Association to controls / ids which label this control (see WAI-ARIA attribute aria-labelledby). Association to controls / ids which describe this control (see WAI-ARIA attribute aria-describedby). Opens the Popover and sets the Popover position according to the {@link #getPlacement() placement} property around the <code>oControl</code> parameter. This is the control to which the Popover will be placed. It can be not only a UI5 control, but also an existing DOM reference. The side of the placement depends on the placement property set in the Popover. Indicates whether popover should be managed by InstanceManager or not Closes the popover when it's already opened. The method checks if the Popover is open. It returns true when the Popover is currently open (this includes opening and closing animations), otherwise it returns false.