## Overview
A Popover is a localized, non-modal container that pops up over all other elements on a page to convey additional content and actions.
## Codex implementation
### Component task owners
- Designer: //add the main designer's name//
- Developer: //add the main developer's name//
### Open questions
- Regarding focus behavior and tab order, what is the expected behavior for entering and exiting the focus of the Popover when using a keyboard?
- Define the user flow when interacting with elements in the background.
- Option 1: First lose the focus of the Popover, then interact with other elements. Example: When a Popover is visible, clicking on a link in the background will close the Popover.
- Option 2: Instantly able to interact with other elements. Example: When a Popover is visible, clicking on a link in the background will close the Popover and navigate to another page.
- In OOUI, the PopupButton uses the `title` HTML attribute. Should the Popover use the `title` attribute? And do we style it similarly to the Tooltip?
- In mobile, Popover appears as a bottom sheet and there are known issues with bottom sheets in iOS. Do we include the mobile-friendly version in the MVP?
### Design spec
| [[ https://www.figma.com/design/3x57HYvgLTqNA8ogD89vwP/Popover?node-id=1-3726&t=o8SSp1e9ldc50fDu-1 | Component spec sheet ]] |
#### Anatomy
//Designer should list the structure and properties of the component.//
#### Style
//Designer should list the visual features of the component.//
#### Interaction
//Designer should list interaction specifications.//
#### Guidelines
| [[ https://docs.google.com/document/d/1YFtqPkFnesIqcceOy0qs69MzkBf-4Fyis_bOS8ZBbdk/edit?usp=sharing | Doc with the guidelines ]] | Images |
#### Demos
//Designer should describe how the component should be documented in the demos, including configurable and standalone demos.//
---
## Acceptance criteria
### Minimum viable product
This task covers the minimum viable product (MVP) version of this component. MVP includes basic layout, default states, and most important functionality.
**MVP scope**
- [] //List all parts of the MVP scope for this component//
**Design**
- [] Design the [[ https://doc.wikimedia.org/codex/latest/contributing/designing-new-components.html#_3-design-the-component | Figma exploration file ]] and include its link in this task:
- [] Make sure the Figma component is designed with all the required states, properties, and variants, including the [[ https://doc.wikimedia.org/codex/latest/contributing/designing-new-components.html#text-directionality-behavior | LTR and RTL ]] versions
- [] Make sure all colors used in the component follows the [[ https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html | minimum required contrast ]] to be accessible
- [] Provide a thorough explanation of the component's behavior in the spec sheet, including all relevant specifications, maximum examples, and usage recommendations
- [] Include a list of keyboard shortcuts to navigate the component //(keyboard navigation table)//
- [] Document the component's guidelines and provide the link to the doc and its images in this task.
- [] Publish the main component in the [Figma library](https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/%E2%9D%96-Codex-components?node-id=1891%3A4420&viewport=287%2C338%2C0.28). //This step will be done by a DST member.//
**Code**
- [] Implement the component in Codex
- [] Implement the guidelines in the component's page
### Future work
- //If applicable, list future work that should be done for this component after the MVP is implemented as part of this task. You should open new, standalone tasks for all future work.//