Popover Showcase
Example Dropdown
one item
another item
another item
another item
Example Center
My Header
one modal_content item
another modal_content item
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur enim alias sit vitae earum exercitationem atque dolores. Magni veritatis reprehenderit, sequi ad error tempore necessitatibus incidunt perferendis dolorum aliquid voluptatem ut eveniet! Quibusdam, ipsum assumenda. Excepturi voluptas quam vel veniam autem nesciunt itaque repudiandae quisquam, fuga quasi odio ipsa in.
My Header
nested item
another nested item
Lorem ipsum etur adipisicing e vncidunt perferendis dolorum aliquid voluptatem ut eveniet! Quibusdam, ipsum assumenda. Excepturi voluptas quam vel veniam autem nesciunt itaque r.
Example Full
Full Popover
one modal_content item
another modal_content item
Example Corner
Corner Popover
This will be in the corner
Maybe for a chatbox or something
Example Side Panel
Side Panel Popover
This will be a side panel
Maybe for a edit or something
Component Documentation
Component Name
Popover
Builder Function Name
create_popover_manager
Description
Displays content in a floating panel, either as a dropdown anchored to an element or a modal (center, panel, or full screen).
Use like example
Config
| Property | Type | Default | Description |
|---|---|---|---|
| type | string | center | Specifies the popover style. 'dropdown' anchors below an element, 'center' is a modal, 'full' slides up from bottom, 'panel' slides from a side. |
| popover_type | string | auto | Popover usage approach. If 'auto', uses the new HTML <dialog popover> attribute. If 'manual', you handle your own toggling. Not fully implemented in code example (it currently expects 'auto'). |
| anchor_id | string or null | ID of the DOM element to anchor the popover if type=dropdown. If not provided, popover uses an internally generated anchor. | |
| pt | number | 1 | Padding top in rem. |
| pb | number | 1 | Padding bottom in rem. |
| pl | number | 1 | Padding left in rem. |
| pr | number | 1 | Padding right in rem. |
| min_width | number | 50 | Minimum width in px. |
| min_height | number | 50 | Minimum height in px. |
| target_width | number or null | 400 | Intended popover width in px. If screen is smaller, popover might become 'full'. |
| target_height | number or null | 400 | Intended popover height in px. If screen is smaller, might become 'full'. |
| max_width | number or null | Max width in px. If null, it uses some responsive logic in CSS. | |
| max_height | number or null | Max height in px. If null, uses responsive logic in CSS. | |
| edge_forgiveness | number | 10 | Margin to keep from the screen edges in px when type=dropdown or similar. |
| is_disabled | boolean | false | Disables any user interaction if true (not used in code sample). |
| is_show_x | boolean | true | Whether to show an 'X' button in the top-right corner to close the popover. |
| border_radius | number | 2 | Border radius in rem. |
| background_color | string (CSS color) | var(--bg) | Background color of the popover. |
| border_color | string (CSS color) | var(--shadow5-t) | Border color. |
| contrast_color | string (CSS color) | var(--g14-t) | Used for text or stroke color if needed in code (not heavily used in the example). |
| drop_color | string (CSS color) | var(--shadow8) | Used for box-shadow color around the popover. |
| header | string or null | Optional header text displayed at the top of the popover. | |
| header_font_size | number | 2 | Header font size in rem. |
| is_alt_content_shown | boolean | false | If true, the content_alt snippet is shown in place of main content. Often used to display success or alternate states. |
| corner | string or null | Positions the popover in a corner if type='center'. | |
| panel_side | string | right | If type='panel', which side it slides from. |
| can_swipe_close | boolean | false | If true, allows a user to swipe to close for certain types (like 'full' or 'panel'). |
| on_open | function | Optional callback invoked when the popover is about to open. | |
| on_close | function | Optional callback invoked when the popover is about to close. |
Methods
| Method | Description | Parameters | Returns |
|---|---|---|---|
| open | Opens the popover element (via showPopover). | No Params | |
| close | Closes the popover element (via hidePopover). | No Params | |
| toggle | Toggles the popover element (show/hide). | No Params | |
| handle_before_toggle | Internal method triggered by onbeforetoggle event. Tracks open/close state, calls on_open/on_close. | No Params | |
| show_temp_message | Displays a temporary success/error message overlay, optionally closing the popover afterward. | message: string to display icon: string (optional icon, e.g. 'success', 'error') ms: number (time in ms to keep message visible) is_close_on_end: boolean (whether to close the popover at the end) on_finish: callback function |
Returned Properties
| Property | Type | Description |
|---|---|---|
| id | string | Unique ID for the popover. |
| is_show | boolean | Tracks whether the popover is currently shown. |
| x_button_manager | object | Button manager for the 'X' button in the top-right corner if is_show_x=true. |
| temp_message | object or null | Used for ephemeral messaging overlay (like a success check). |
| positioning | object or null | Used internally to store layout calculations, e.g. (popover_left_pos, popover_top_pos). |
| handle_screen_change | Function to recalc positions if screen size changes. Currently triggers on window scroll & resize. |
