## 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//
### Component scope
The initial component will have the following features:
- Slots for header,- A target element that opens the Popover. The target element is triggered on hover or toggle. body,This can be a toggle button or a link triggered on hover (eg. and footerWikipedia link previews).
- Props: open, title, useCloseButton, closeB- If the target element is a toggle buttonLabel, props related to actions and their layout, target (similar to Dialog)ensure the toggle button has a `type="button"` to prevent browsers from mistaking the button as a submit button when placed inside forms.
- A live region to announce the Popover information.
- Customizable layouts. For example, images in Wikipedia link previews have a vertical and horizontal layout with an image and tex- Use Floating UI to absolutely position the Popover to the target element.
- Trigger a Popover by toggling a- Customize with a title, close button, text, or hovering a link such as Wikipedia link previewsand actions.
- Customize by including images (eg. Wikipedia link previews).
- Customizable layouts such as vertical and horizontal (eg. Wikipedia link previews).
- An optional caret tip that points to the triggering element (opt-in to use this feature). Refer to Floating UI's [[ https://floating-ui.com/docs/arrow | arrow ]] to position the caret tip.
API:
- Slots: header, body, and footer.
- Props: open, title, useCloseButton, closeButtonLabel, props related to actions and their layout, target (similar to Dialog).
### 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?
- Does this need a global event handler for the Escape key?
- Does it need to be aware of the teleport target like the Dialog?
### 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 - MVP version
[] Implement the Vue component in Codex
[] Add the WIP component
[] Add a basic demo to Sandbox
[] Add snapshot tests