## Popover Display popover section relative to given target element. Category: Overlay ### Simple Example ```python import dash_mantine_components as dmc component = dmc.Popover( [ dmc.PopoverTarget(dmc.Button("Toggle Popover")), dmc.PopoverDropdown(dmc.Text("This popover is opened on button click")), ], width=200, position="bottom", withArrow=True, shadow="md", ) ``` ### Popover Target Any component you specify in dmc.PopoverTarget is wrapped by a dmc.Box component under the hood. So adding a margin to your target component will also move the dropdown away. In order to prevent this, add margin to the wrapper component using the prop `boxWrapperProps` in dmc.PopoverTarget. ### Focus Trap If you need to use any interactive elements within Popover, set `trapFocus` prop: ```python import dash_mantine_components as dmc component = dmc.Popover( [ dmc.PopoverTarget(dmc.Button("Toggle Popover")), dmc.PopoverDropdown( [ dmc.TextInput(label="Name", placeholder="Name", size="xs"), dmc.TextInput( label="Email", placeholder="john@doe.com", size="xs", mt="xs" ), ] ), ], width=300, position="bottom", withArrow=True, trapFocus=True, shadow="md", ) ``` ### Inline elements Enable inline middleware to use Popover with inline elements. ```python import dash_mantine_components as dmc component = dmc.Flex( [ "Here is some text with", dmc.Popover( [ dmc.PopoverTarget(dmc.Mark(" an inline popover ")), dmc.PopoverDropdown(" more info"), ], middlewares={"flip": True, "shift": True, "inline": True}, ), "and more text after.", ], direction="row", gap="xs", ) ``` ### Same width Set w="target" prop to make Popover dropdown take the same width as target element. ```python import dash_mantine_components as dmc component = dmc.Popover( [ dmc.PopoverTarget(dmc.Button("Toggle Popover", w=200)), dmc.PopoverDropdown( dmc.Text( "This popover has same width as target, it is useful when you are building input dropdowns" ) ), ], width="target", position="bottom", withArrow=True, shadow="md", ) ``` ### With overlay Set `withOverlay` prop to add overlay behind the dropdown. You can pass additional configuration to `Overlay` component with `overlayProps` prop: ```python import dash_mantine_components as dmc component = dmc.Popover( [ dmc.PopoverTarget(dmc.Button("Toggle Popover")), dmc.PopoverDropdown(dmc.Text("This popover is opened on button click")), ], width=200, position="bottom", withArrow=True, shadow="md", withOverlay=True, overlayProps={"zIndex": 10000, "blur": '8px'}, zIndex=10001 ) ``` ### Hide detached Use `hideDetached` prop to configure how the dropdown behaves when the target element is hidden with styles (`display: none, visibility: hidden,` etc.), removed from the DOM, or when the target element is scrolled out of the viewport. By default, `hideDetached` is enabled – the dropdown is hidden with the target element. You can change this behavior with `hideDetached=False`. To see the difference, try to scroll the container that holds the Popover components: ```python import dash_mantine_components as dmc component = dmc.Box( style={"border": "1px solid var(--mantine-color-dimmed)", "overflow": "auto"}, p="xl", w=400, h=200, children=[ dmc.Box( w=1000, h=400, children=dmc.Group( [ dmc.Popover( opened=True, width="target", position="bottom", closeOnClickOutside=False, children=[ dmc.PopoverTarget( dmc.Button("Toggle popover") ), dmc.PopoverDropdown("This popover dropdown is hidden when detached"), ], ), dmc.Popover( opened=True, width="target", position="bottom", closeOnClickOutside=False, hideDetached=False, children=[ dmc.PopoverTarget( dmc.Button("Toggle popover") ), dmc.PopoverDropdown("This popover dropdown is visible when detached"), ], ), ] ), ) ] ) ``` ### Click outside By default, `Popover` closes when you click outside of the dropdown. To disable this behavior, set `closeOnClickOutside=False`. You can configure events that are used for click outside detection with `clickOutsideEvents` prop. By default, `Popover` listens to `mousedown` and `touchstart` events. You can change it to any other events, for example, `mouseup` and `touchend`: ```python import dash_mantine_components as dmc component = dmc.Popover( width=200, position="bottom", clickOutsideEvents=["mouseup", "touchend"], children=[ dmc.PopoverTarget( dmc.Button("Toggle popover", id="toggle-btn") ), dmc.PopoverDropdown( dmc.Text( "Popover will be closed with mouseup and touchend events", size="xs" ) ) ] ) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. #### Popover Selectors | Selector | Static selector | Description | |-----------|------------------------------|----------------------| | dropdown | .mantine-Popover-dropdown | Dropdown element | | arrow | .mantine-Popover-arrow | Dropdown arrow | | overlay | .mantine-Popover-overlay | Overlay element | #### Popover CSS Variables | Selector | Variable | Description | |-----------|--------------------|--------------------------------| | dropdown | --popover-radius | Controls dropdown border-radius | | | --popover-shadow | Controls dropdown box-shadow | #### Popover Data Attributes | Selector | Attribute | Value | |-----------|-----------------|-----------------------------------| | dropdown | data-position | Value of floating UI dropdown position | ### Keyword Arguments #### Popover - children (a list of or a singular dash component, string or number; optional): `Popover.Target` and `Popover.Dropdown` components. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - arrowOffset (number; optional): Arrow offset in px, `5` by default. - arrowPosition (a value equal to: 'center', 'side'; optional): Arrow position. - arrowRadius (number; optional): Arrow `border-radius` in px, `0` by default. - arrowSize (number; optional): Arrow size in px, `7` by default. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - clickOutsideEvents (list of strings; optional): Events that trigger outside clicks. - closeOnClickOutside (boolean; optional): Determines whether dropdown should be closed on outside clicks, `True` by default. - closeOnEscape (boolean; optional): Determines whether dropdown should be closed when `Escape` key is pressed, `True` by default. - data-* (string; optional): Wild card data attributes. - disabled (boolean; optional): If set, popover dropdown will not be rendered. - floatingStrategy (a value equal to: 'absolute', 'fixed'; optional): Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy), `'absolute'` by default. - hideDetached (boolean; optional): If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen, `True` by default. - keepMounted (boolean; optional): If set dropdown will not be unmounted from the DOM when it is hidden, `display: none` styles will be added instead. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - middlewares (dict; optional): Floating ui middlewares to configure position handling, `{ flip: True, shift: True, inline: False }` by default. `middlewares` is a dict with keys: - offset (number; optional): Offset of the dropdown element, `8` by default. - opened (boolean; default False): Controlled dropdown opened state. - overlayProps (dict; optional): Props passed down to `Overlay` component. - portalProps (dict; optional): Props to pass down to the `Portal` when `withinPortal` is True. - position (a value equal to: 'top', 'right', 'bottom', 'left', 'top-end', 'top-start', 'right-end', 'right-start', 'bottom-end', 'bottom-start', 'left-end', 'left-start'; optional): Dropdown position relative to the target element, `'bottom'` by default. - positionDependencies (list of boolean | number | string | dict | lists; optional): `useEffect` dependencies to force update dropdown position, `[]` by default. - radius (number; optional): Key of `theme.radius` or any valid CSS value to set border-radius, `theme.defaultRadius` by default. - returnFocus (boolean; optional): Determines whether focus should be automatically returned to control when dropdown closes, `False` by default. - shadow (optional): Key of `theme.shadows` or any other valid CSS `box-shadow` value. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - transitionProps (dict; optional): Props passed down to the `Transition` component that used to animate dropdown presence, use to configure duration and animation type, `{ duration: 150, transition: 'fade' }` by default. `transitionProps` is a dict with keys: - trapFocus (boolean; optional): Determines whether focus should be trapped within dropdown, `False` by default. - variant (string; optional): variant. - width (string | number; optional): Dropdown width, or `'target'` to make dropdown width the same as target element, `'max-content'` by default. - withArrow (boolean; optional): Determines whether component should have an arrow, `False` by default. - withOverlay (boolean; optional): Determines whether the overlay should be displayed when the dropdown is opened, `False` by default. - withRoles (boolean; optional): Determines whether dropdown and target elements should have accessible roles, `True` by default. - withinPortal (boolean; optional): Determines whether dropdown should be rendered within the `Portal`, `True` by default. - zIndex (string | number; optional): Dropdown `z-index`, `300` by default. #### PopoverTarget - children (a list of or a singular dash component, string or number; required): Content. - boxWrapperProps (dict; optional): Target box wrapper props. `boxWrapperProps` is a dict with keys: #### PopoverDropdown - children (a list of or a singular dash component, string or number; required): Content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`.