<h2>When to use</h2>
<p>Popover is similar to tooltip and drawer, but they are not used for the same purpose. Identifying the right use case will make the experience clear for all users, particularly for those with cognitive and learning disabilities, or those using screen readers.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Popover</td>
<td>Popover is a container that displays supplemental information after pressing its trigger element. They can contain limited interactions with its content, but should not contain actions that are required for the experience.</td>
</tr>
<tr>
<td><a href="/components/tooltip/">Tooltip</a></td>
<td>Tooltip is a container that temporarily displays a short, text-only definition and is activated when a user hovers or focuses on an icon or other trigger. Limit tooltip content to short descriptions written in sentence case. If content is a full sentence, use punctuation.</td>
</tr>
<tr>
<td><a href="/components/drawer/">Drawer</a></td>
<td>Drawer is a secondary content component that sits off-screen until triggered by the user. It can contain multiple interactive elements and extensive content.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"The anatomy of popover, labeled 1 through 4.","caption":"Popovers can contain up to four elements:\n\n1. Popover title: indicates the popover’s purpose.\n2. Pointer: directs user’s attention to the source element that triggered the popover.\n3. Dismiss icon: to close the popover.\n4. Body: area for text, images, links, and other content.","url":"https://dds.dell.com/site/production/36/d5/Popover_Anatomy_9e11273d98.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/popups/","type":"External"},"title":"Popover article","description":"Read the Nielsen Norman Group&#39;s article on popup/popover.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/timing-exposing-content/","type":"External"},"title":"Timing guidelines","description":"Read the Nielsen Norman Group&#39;s article on popover&#39;s timing.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

A popover is triggered by pressing a [text link](/components/link/) or [button](/components/button/) icon. It contains supplemental interactive content that adds details and assistance to the specific piece of content that acts as its trigger. 

Interactions with the content of a popover give additional context or link to other sources of information. Use when content may be helpful to some users but is too extensive to include inline. Use popovers sparingly and allow only one popover to display at a time. If multiple popovers become visible, users may experience cognitive overload.

<details data-name='image-block' data-images='[{"alt":"Sample content in a popover, including text, a link, and an image.","caption":"Popover displays information associated with an element on press, not on hover.","url":"https://dds.dell.com/site/stage/ea/15/Popover_Usage_d09f303710.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Sizes

Popover is provided in small, medium, and large fixed widths. If a popover is set to large but will not fit on a screen, the popover will appear as medium width. This does not work in reverse. 

If a small popover covers a viewable area, the pointer can be removed. 

A popover does not have a default height but will extend to fit or contract to hug its contents. Popover is limited to 80% of the height of the screen to ensure the entire component is displayed. If there is more content than can fit in the popover at 80% screen height, a scrollbar will be added.

<details data-name='image-block' data-images='[{"alt":"Popover component size large","caption":"","url":"https://dds.dell.com/site/stage/b8/61/Popover_Size_Large_d611040b5a.png"},{"alt":"Popover component size medium","caption":"","url":"https://dds.dell.com/site/stage/ef/cd/Popover_Size_Medium_0169120b1e.png"},{"alt":"Popover component size small","caption":"","url":"https://dds.dell.com/site/stage/88/30/Popover_Size_Small_ae9d31c89e.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

| Size   | Use case                                                      |
| ------ | ------------------------------------------------------------- |
| Large  | Use with larger viewports for complex or larger content flows |
| Medium | Use for most interactive supplemental content                 |
| Small  | Made for small, simple helper content                         |

## Layout

### Position

Position the popover in relation to the source element either above, below, to its left, or to its right. The popover defaults to the center position above or below the trigger when possible, but can be placed in one of three positions on each side of the component if needed. 

As with a [tooltip](/components/tooltip/), make sure the direction and placement of your popover don’t obscure information on the page that the popover content is directly related to. 

<details data-name='image-block' data-images='[{"alt":"Popover position and pointer positions with all possible options.","caption":"","url":"https://dds.dell.com/site/production/4c/4c/Popover_Position_7f7a991e65.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

| Position | Location                           |
| -------- | ---------------------------------- |
| Top      | Above the source element (default) |
| Right    | To the right of the source element |
| Bottom   | Below the source element           |
| Left     | To the left of the source element  |

| Pointer position | Location                                                           |
| ---------------- | ------------------------------------------------------------------ |
| Center           | Popover above, pointer points down to the source element (default) |
| Start            | Top or left in left-to-right localizations                         |
| End              | Bottom or right in left-to-right localizations                     |
| Left             | To the left of the source element                                  |

## Interaction

### Behavior and states

A popover is opened by selecting a trigger and closed by either selecting the trigger again or the close icon. When selected, the component hovers in one of four positions; to the top, right, bottom, or left of the trigger. On small screens, it may cover the entire viewable area including the trigger.

Interactive elements within the content of an open popover can include a scroll bar, external links, a [view more/less](/components/view-more-less/) component, a [table](/components/table/) component, and other displayed content.

Popovers should not include submittable forms, select components, or other complex interactions. Consider [drawer](/components/drawer/) or [modal](/components/modal/) for more extensive supplemental content.

Once the popover is closed, the component will return to its rest state.

| State   | Behavior                                                                                                                                                       |
| ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Rest    | The rest state is indicated by a trigger available to focus or press.                                                                                          |
| Hover   | A popover trigger typically does not have a hover state, but may follow button styles if using a secondary or tertiary style.                                  |
| Pressed | The popover window opens above content with its pointer on, or near the trigger, indicating the trigger’s source and what the trigger’s content is related to. |

## Standards

### Accessibility

#### Make sure all popover titles are unique and accurate

Popover titles should be descriptive and identify it against other content on the page.
WCAG 2.2: [1.1.1 Non-Text Content (w3.org)](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html), [1.3.1 Info and Relationships (w3.org)](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html)

#### [](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html)Avoid using triggers to initiate popovers which are not user-initiated

Popovers should be user-initiated. A popover should not be automatically triggered by other conditions such as “5 seconds after page load” or “when the user mouses away from the browser window.”
WCAG 2.2: [3.2.5 Change on Request](https://www.w3.org/WAI/WCAG22/Understanding/change-on-request.html)

#### [](https://www.w3.org/WAI/WCAG22/Understanding/change-on-request.html)Avoid covering up critical content with a popover

As with tooltips, make sure that the direction and placement of your popover don’t obscure information on the page that the popover content is directly related to.

#### Follow approved popover focus behavior for keyboard users:

| Command                  | Description                                                                                                                                                                                                                            |
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| On activation            | The default initial focus should be on the popover’s dismiss button. If warranted by the content, you may use a different focus.                                                                                                       |
| Tab (initial press)      | Focus should move to the next interactive element inside the popover.                                                                                                                                                                  |
| Tab (subsequent presses) | Cycles focus through interactive elements inside the popover following visual order wherever possible. On the last interactive element inside popover, tab moves focus back to the first focusable interactive element in the popover. |
| Shift + Tab              | Cycles focus through interactive elements in a reverse direction.                                                                                                                                                                      |
| Escape key (esc)         | Dismisses the popover.                                                                                                                                                                                                                 |

### Content

#### Popover title

Be brief and descriptive about the purpose of the popover. The length should not exceed one line.

**Do:** Help me choose

**Don’t:** Comparing Pentium-class versus Xeon-class processors

#### Body text

Popover content should be centered around the trigger and what is essential for a user to know in relation to it. Content can include imagery, tables, reference links, and more text than a tooltip, but it should not require progressive actions like inputs and buttons. If content exceeds the container height, a scrollbar will appear, but consider placing longer content within the on-page experience or using a different component like a [drawer](/components/drawer/).

Avoid placing complex content or functionality inside a popover. Content should be short and limited to simple, contextual functionality that relates directly to a particular item or control on the page. More complex content, such as a [form](/patterns/form/), should be placed in either a modal or on the page directly.

#### Capitalization

Use sentence case for labels, default values, detected values, and autocompleted text, unless referencing product names and proper nouns.

Design

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-popover--basic)

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-popover--basic&viewMode=docs&websiteFrame=true'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/docs/components-popover--basic)

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-popover--docs&args=&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/docs/components-popover--docs)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-popover--docs&viewMode=docs&websiteFrame=true'></details>

Popover is a container that floats over page content after selecting a trigger element. It contains supplemental content related to its trigger, and can be customized to include text, images, and interactions.

Popover

<p>AI Chat Toolkit has moved! You can now find it under the AI section.</p>


AI Chat Toolkit Redirect

<p>The DDS Feedback Form has been updated to point to Service Now (the new official intake form). Please <a href="/resources/videos/servicenow-overview">review this video</a> to learn more about how to interact with our team. Although the tool and process changed, our team expects to continue providing the same support as before.</p>
