<h2>What&#39;s new in v3</h2>
<ul>
<li><p><strong>Anatomy:</strong> Popover is now built using slots. These slots have been added to make the structure consistent between design and code, and to help designers place content correctly without detaching or breaking spacing.</p>
<ul>
<li><strong>Header slot:</strong> For optional title or header content.</li>
<li><strong>Content slot:</strong> For the main body content.</li>
</ul>
</li>
<li><p><strong>Design tokens:</strong> Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</p>
</li>
</ul>
<h2>When to use</h2>
<p>Use a popover when you need to show brief, contextual information without taking the user away from the current page.</p>
<p>Use it when:</p>
<ul>
<li>Clarifying something inline without navigating to another page.</li>
<li>Revealing supplemental details directly related to a specific trigger element.</li>
<li>Providing lightweight interactions or small supporting content that doesn’t require a modal.</li>
</ul>
<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>
<p>Popovers can contain up to four elements. Header and content are now structured using slots. This keeps the layout consistent between design and code and ensures correct spacing automatically.</p>
<p>This component supports the use of slots. For more details about how to use slots, see the <a href="/components/popover?tab=Design#design-layout">layout</a> section. </p>
<details data-name='image-block' data-images='[{"alt":"The anatomy of popover, labeled 1 through 4.","caption":"1. Header (slot, optional): Holds the popover’s title or header elements. \n2. Pointer: Indicates the element that triggered the popover.\n3. Dismiss icon: Closes the popover.\n4. h Container for text, images, links, and other body content.","url":"https://dds.dell.com/site/v3/components/popover/popover-anatomy.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.

The popover includes a header slot (optional) and a content slot that organizes the information designers place inside the component.

<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/v3/components/popover/popover-usage.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/v3/components/popover/popover-sizes-large.png"},{"alt":"Popover component size medium","caption":"","url":"https://dds.dell.com/site/v3/components/popover/popover-sizes-medium.png"},{"alt":"Popover component size small","caption":"","url":"https://dds.dell.com/site/v3/components/popover/popover-sizes-small.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

### Building block

A slot is available in this component to support flexible composition. It allows users to place additional elements such as images, text blocks, or other components while preserving the component’s layout, padding, and visual consistency.

<details data-name='image-block' data-images='[{"alt":"","caption":"\nExample of the component with building block and slot.","url":"https://dds.dell.com/site/v3/components/popover/popover-slot.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### 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/v3/components/popover/popover-layout.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

| 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. |

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.

The header and content slots follow a fixed structure to ensure predictable behavior. Designers should place text or elements only inside these slots to maintain alignment and accessibility.

## 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

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).
| Name                             | Collection      | CSS var                                       | Preview   |
| -------------------------------- | --------------- | --------------------------------------------- | --------- |
| popover/padding                  | Component       | `var(--dds-popover-padding)`                  | -         |
| border/radius/xs                 | Semantic        | `var(--dds-border-radius-xs)`                 | -         |
| color/background/SURFACE/neutral | Semantic        | `var(--dds-color-background-surface-neutral)` | #FFFFFF   |
| popover/gap                      | Component       | `var(--dds-popover-gap)`                      | -         |
| popover/header-gap               | Component       | `var(--dds-popover-header-gap)`               | -         |
| size/4                           | Global          | `var(--dds-size-4)`                           | -         |
| size/16                          | Global          | `var(--dds-size-16)`                          | -         |
| border/width/xs                  | Semantic        | `var(--dds-border-width-xs)`                  | -         |
| color/purple/10                  | Global          | `var(--dds-color-purple-10)`                  | #FBEBFF   |
| color/purple/80                  | color/purple/80 | `var(--dds-color-purple-80)`                  | #66278F   |
| button/size/xs                   | Component       | `var(--dds-button-size-xs)`                   | -         |
| button/background/ghost-rest     | Component       | `var(--dds-button-background-ghost-rest)`     | #40586D00 |
| icon/size/xs                     | Component       | `var(--dds-icon-size-xs)`                     | -         |
| color/text/NEUTRAL/rest          | Semantic        | `var(--dds-color-text-neutral-rest)`          | #1D2C3B   |
| pointer/padding                  | Component       | `var(--dds-pointer-padding)`                  | -         |
| Layout/Size/xs                   | -               | `var(--dds-layout-size-xs)`                   | -         |
| pointer/width                    | -               | `var(--dds-pointer-width)`                    | -         |
| pointer/height                   | -               | `var(--dds-pointer-height)`                   | -         |

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-popover--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-popover--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-popover--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-popover--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?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' data-hideWidget='false'></details>

A popover is a small floating container that appears when a user selects a trigger element. It provides extra information or actions related to that trigger.