# r-popover A floating contextual overlay anchored to a trigger element, with headline, body content, and action slots. Supports auto or manual dismiss. Example ``` Here is some additional information about this topic. Got it ``` ## class: `RPopover`, `r-popover` ### Fields | Name | Privacy | Type | Default | Description | Inherited From | | ------------------ | ------- | ------------------------------------------ | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- | | `dismissAriaLabel` | | `string` | | Defines `aria-label` content for the dismiss button.
Used for accessibility when dismiss button is present. | | | `dismissMode` | | `"auto" \| "manual"` | `'auto'` | Defines the behavior of the popover's dismissing.
\- `auto`: The popover can be dismissed by clicking outside or pressing Esc.
\- `manual`: The popover requires explicit user action to close. | | | `horizontal` | | `"center" \| "cover" \| "left" \| "right"` | `'center'` | Defines preferred placement horizontally relative to the trigger.
\- `left`: Align to the left of the trigger
\- `center`: Center align with the trigger
\- `right`: Align to the right of the trigger | | | `open` | | `boolean` | | Defines initial state of the popover visibility. | | | `triggerAction` | | `"hide" \| "show" \| "toggle"` | `'toggle'` | Defines the action that will be triggered when the trigger is clicked.
\- `toggle`: Toggle the popover open/closed state
\- `show`: Only show the popover
\- `hide`: Only hide the popover | | | `triggerAriaLabel` | | `string` | | Defines `aria-label` content for the popover trigger.
Used for accessibility to describe the trigger button. | | | `vertical` | | `"bottom" \| "cover" \| "middle" \| "top"` | `'bottom'` | Defines preferred placement vertically relative to the trigger.
\- `top`: Position above the trigger
\- `bottom`: Position below the trigger
\- `middle`: Position to the side of the trigger | | ### Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ---------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | --------------- | -------------- | | `hide` | | Method to hide the popover.
Closes the popover and emits hide event. | | `Promise` | | | `setBlur` | | Remove focus from all focusable elements within the popover.
Calls setBlur on all child components and the host element. | | `Promise` | | | `setFocus` | | Set focus inside the popover to the most appropriate element.
Priority order:
1\. Dismiss button (if present)
2\. Action element (if present)
3\. Content element (if present)
4\. Host element as fallback | | `Promise` | | | `show` | | Method to show the popover.
Opens the popover, positions it correctly, and sets focus to appropriate element. | | `Promise` | | | `toggle` | | Toggle popover visibility.
Shows the popover if hidden, hides it if shown. | | `Promise` | | ### Events | Name | Type | Description | Inherited From | | ------------------- | --------------------------------- | ------------------------------- | -------------- | | `focusPopover` | `CustomEvent` | Emits when popover focus is set | | | `hidePopover` | `CustomEvent` | Emits when popover is hidden | | | `popoverOpenChange` | `CustomEvent<{ open: boolean; }>` | Emits when open state changes | | | `showPopover` | `CustomEvent` | Emits when popover is shown | | ### Attributes | Name | Field | Inherited From | | -------------------- | ---------------- | -------------- | | `dismiss-aria-label` | dismissAriaLabel | | | `dismiss-mode` | dismissMode | | | `horizontal` | horizontal | | | `open` | open | | | `trigger-action` | triggerAction | | | `trigger-aria-label` | triggerAriaLabel | | | `vertical` | vertical | | ### Slots | Name | Description | | ---------- | --------------------------------------------------------------- | | `action` | Action buttons inside the popover (use `r-popover-action`) | | `content` | Body content of the popover (use `r-popover-content`) | | `headline` | Headline content inside the popover (use `r-popover-headline`) | | `trigger` | The element that triggers the popover (use `r-popover-trigger`) |

---

## Exports | Kind | Name | Declaration | Module | Package | | --------------------------- | ----------- | ----------- | ------ | ------- | | `js` | `RPopover` | RPopover | | | | `custom-element-definition` | `r-popover` | RPopover | | |