> For the complete documentation index, see [llms.txt](https://voit.gitbook.io/voitdocs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://voit.gitbook.io/voitdocs/components/popover.md).
# Popover
Popovers are floating containers that display additional information or options in context with a trigger element. They are used to provide contextual actions or information.
## Overview
Popovers are activated by hovering or clicking on a trigger element, providing a non-modal way to display extra information or options.
{% embed url="" %}
## When to use
* Use a popover to present quick actions, such as options or settings related to a specific element or task.
* Use a popover for selecting options that relate to a specific task or element, such as editing or filtering settings.
* When the information displayed is transient and doesn’t need to remain on screen, popovers can efficiently communicate this.
* Use a popover to keep your page uncluttered by hiding supplementary actions or information behind a trigger.
## When not to use
* Avoid popovers when the information is essential or needs to be always visible.
* Don't use popovers for workflows that require significant interaction or decision-making; opt for more structured components like dialogs.
* Avoid using popovers to navigate between views or pages. Popovers should maintain users in the same context.
* If a user needs to repeatedly interact with the content, don't use a popover as it might frustrate the experience.
* Use inline or always-visible elements. Popovers should not be used to display large blocks of text or complex layouts.
## Types
## Anatomy
1. **Pointer:** A small triangle connecting the popover to its trigger element, visually indicating the relationship.
2. **Container:** The main frame that holds the content of the popover, styled to float above other elements.
3. **Dismiss Icon:** A close icon (often an 'X') that allows users to dismiss the popover quickly.
4. **Title:** The heading of the popover that provides context to the content.
5. **Description:** The text within the popover that elaborates additional information about the context or actions.
6. **Actions (Button Group):** Buttons at the bottom of the popover that allow the user to perform related actions.
## Alignment
## Size
| Size | Title (px) | Description (px) | Icon (px) | Corner (px) | Container Height (px) |
| ------- | ---------- | ---------------- | --------- | ----------- | --------------------- |
| Default | 16 | 14 | 16 | 16 | 48 |
## Accessibility
* **Keyboard Navigation:** Ensure popovers are fully navigable using the keyboard, allowing users to open, interact with, and close them without needing a mouse.
* **Maintain Focus Control:** When the popover is active, ensure that focus is trapped inside the popover until it is dismissed. Focus should return to the trigger element when the popover closes.
* **Dismissible with ESC Key:** Popovers should always be dismissible with the Escape key. This is critical for accessibility as it gives users control over closing transient content.
## Example
* **Action Options:** A popover for selecting quick settings, such as filtering options on a search page.
* **Inline Help:** Hovering over a question mark icon displays a popover with helpful tips or explanations about form fields.
* **Profile Preview:** Clicking on a username opens a popover showing a brief user profile with quick action buttons like "Message" or "Follow."
* **Notification Settings:** A popover provides easy-to-reach options for configuring notifications when interacting with the notifications icon.
