<h2>What&#39;s new in v3</h2>
<ul>
<li><strong>Width:</strong> Updated max‑width to 240 px for better readability across layouts.</li>
<li><strong>Padding:</strong> Increased internal padding to 16 px for better spacing and improved legibility.</li>
<li><strong>Color:</strong> Updated container color to follow the v3 rule that reserves gray exclusively for inactive states.</li>
<li><strong>Pointer:</strong> Standardized pointer spacing using the pointer padding token for consistent alignment across components.</li>
<li><strong>Variants:</strong> Simplified variants by making the dismiss button mobile‑only and organizing options into Desktop and Mobile.</li>
<li><strong>Responsiveness:</strong> Added a max‑width constraint and enabled hug‑contents behavior to improve layout responsiveness in flexible designs.</li>
<li><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>.</li>
</ul>
<h2>When to use</h2>
<p>Use a tooltip to provide short, helpful information without adding permanent text to the interface.</p>
<p>Use it when you need to:</p>
<ul>
<li>Clarify the purpose of an icon, label, or control when space is limited.</li>
<li>Offer extra context or definitions that support understanding without interrupting the flow.</li>
<li>Surface non‑essential details that users may need occasionally but not all the time.</li>
</ul>
<p>Tooltips are similar to popovers but serve a different purpose. Choosing the correct component improves clarity for all users, including people with cognitive or learning disabilities and those using screen readers.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Tooltip</td>
<td>A tooltip briefly shows short, contextual text when the user hovers over or focuses on an icon or another trigger.</td>
</tr>
<tr>
<td><a href="https://www.delldesignsystem.com/patterns/chart-customization/">Data visualization tooltip</a></td>
<td>Designed for data‑visualization components. It highlights values or details related to specific data points.</td>
</tr>
<tr>
<td><a href="/components/popover/">Popover</a></td>
<td>A popover shows supplemental information after the user activates its trigger. It may include limited interactions but should not contain actions that are essential to completing a task.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>A tooltip contains short supporting text and an optional pointer. The tooltip appears when the user hovers over or focuses on a trigger.</p>
<details data-name='image-block' data-images='[{"alt":"A tooltip with parts labelled 1 and 2.","caption":"1. **Headline**: Shows the title or main text of the tooltip when needed.\n2. **Body text**: Shows a short description of the target or referenced item.\n3. **Pointer**: Points to the element that triggered the tooltip.\n4. **Dismiss icon (mobile only)**: The dismiss icon lets mobile users close the tooltip manually.","url":"https://dds.dell.com/site/v3/components/tooltip/tooltip-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/tooltip-guidelines/","type":"External"},"title":"Tooltip guidelines","description":"Read the Nielsen Norman Group&#39;s article on tooltip.","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 tooltip&#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

Use tooltips to provide secondary or supplemental information. If the information is important for completing a task, place it directly on the page so the user doesn’t miss it.

Avoid using tooltips for error messages, status updates, long text passages, images, or interactive content.

### Form fields

Use tooltips to add supporting context to [form](/patterns/form/) fields. The trigger can be a button, icon, link, or a combination of these elements.

If users need instructions to complete the form, use helper text instead. Don’t repeat helper‑text content inside a tooltip.

<details data-name='image-block' data-images='[{"alt":"An image of a form with a tooltip hovering over a field.","caption":"\nExample of a tooltip in a form field.","url":"https://dds.dell.com/site/v3/components/tooltip/tooltip-usage-form-fields.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Truncated content

Use tooltips to show the full text of truncated content, such as long file names in the [file input component](/components/file-input/). Tooltips help reveal nonessential information without taking up extra space.

<details data-name='image-block' data-images='[{"alt":"An image of a tooltip hovering over a file name.","caption":"\nExample of a tooltip used in a truncated content.","url":"https://dds.dell.com/site/v3/components/tooltip/tooltip-usage-truncated-content.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Data in charts

You can use two types of preformatted tooltips: DV tooltip and multi‑series tooltip. They are available in the [Data Visualization library Figma kit](https://www.figma.com/design/a1X9m1vTZdG3N6xV5G9bz4/Data-Visualization?t=j7zfAuLpB53W2aPF-0) and are intended for use within charts only. 

* **DV tooltips:** show values for a single data series, with one tooltip per data point.
* **Multi‑series tooltips:** show values for multiple series within the same plot area.

Don’t mix both types in the same chart. Each tooltip includes consistent labels and values. For customization options, see the [chart customization](/patterns/chart-customization/) pattern.

<details data-name='image-block' data-images='[{"alt":"Image of a tooltip being activated when hovering over a point on a line chart.","caption":"\nTooltip being activated when hovering over a point on a chart.","url":"https://dds.dell.com/site/v3/components/tooltip/tooltip-usage-data-charts.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Layout

Placement may change based on available space. The tooltip adjusts automatically to stay visible within the viewport.

* If the chosen position doesn’t fit, the tooltip flips to the closest available side. 
* On small breakpoints (S and XS), the trigger may not have enough horizontal space for pointer alignment. In this case, the tooltip appears above the trigger with no pointer.
* Although Figma separates position and pointer for clarity, Storybook merges them into a single property called placement.

### Position

#### Tooltip

Position controls where the tooltip sits around the trigger element. Choose a position that keeps the tooltip visible and prevents it from covering content the user needs to see.

Tooltips offer four placement options: top, bottom, left, and right.

<details data-name='image-block' data-images='[{"alt":"An image of a tooltip positioned to the left, right, top, and bottom of the trigger content.","caption":"","url":"https://dds.dell.com/site/v3/components/tooltip/tooltip-layout-position-tooltip.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

| Selection | Description                                    |
| --------- | ---------------------------------------------- |
| Top       | Above the trigger (default)                    |
| Bottom    | Places the tooltip below the trigger           |
| Left      | Places the tooltip to the left of the trigger  |
| Right     | Places the tooltip to the right of the trigger |

#### Pointer

Pointer alignment controls where the arrow appears inside the tooltip, not where the tooltip sits. If the tooltip doesn’t fit without being clipped, it automatically switches to a pointer orientation that fits within the [grid margins](/foundations/grid/#margins).

Tooltips support four pointer options: center (default), start, end, and no pointer.

<details data-name='image-block' data-images='[{"alt":"An image of a tooltip with pointer positions labelled center, start, end, and no pointer.","caption":"","url":"https://dds.dell.com/site/v3/components/tooltip/tooltip-layout-position-pointer.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

| Selection  | Description                                                   |
| ---------- | ------------------------------------------------------------- |
| Center     | Arrow is centered (default).                                  |
| Start      | Arrow aligns to the start edge. Supports LTR and RTL layouts. |
| End        | Arrow aligns to the end edge. Supports LTR and RTL layouts.   |
| No pointer | No pointer is shown.                                          |

## Interaction

### Behavior and states

Tooltips activate on hover or focus. They dismiss when the user stops hovering or when the trigger loses focus. Users can also close a tooltip by pressing the Esc key.


On mobile, tooltips activate on press and require a close icon to dismiss. Users can close them by tapping the close [icon](/foundations/icons/).

<details data-name='image-block' data-images='[{"alt":"An image of a tooltip on mobile with a dismiss icon.","caption":"","url":"https://dds.dell.com/site/v3/components/tooltip/tooltip-interaction.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

| State                        | Behavior                                                                                                               |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| Hover                        | Hovering on the trigger shows the tooltip.                                                                             |
| Focus (initial tab or press) | The first tab highlights the trigger. On mobile, the first tab focuses the close icon. A second tab exits the tooltip. |

## Standards

### Accessibility

#### All tooltips should be able to be activated and dismissed via pointer, keyboard, and touch

Users should have full control of the tooltip interaction regardless of device. Do not cause the tooltip to disappear or timeout after a set interval.

WCAG 2.2: [1.4.13: Content on Hover or Focus](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html)

#### [](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html)Avoid covering up critical content with a tooltip

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

WCAG 2.2: [1.4.13: Content on Hover or Focus](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html)

#### [](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html)Tooltips should only contain static, text-based content to avoid additional interactivity

Tooltips are specifically for plain text-based content. If you require links, buttons or additional functionality in your tooltip, use a popover instead. Avoid rich text.

#### Avoid placing essential information in a tooltip

Tooltips should never hide critical information. Whenever possible, avoid using a tooltip altogether and place the information where it is visible at all times.

#### Tooltips should always describe the triggering element

Do not add a control that is specifically there to trigger a tooltip.

### Content

#### Title

Titles are optional and typically unnecessary, as the trigger’s reference can act as the title. If your tooltip requires a title, be brief and descriptive about the purpose of the tooltip. The title length should not exceed one line.

**Do:** Password criteria

**Don’t:** Criteria for creating passwords

#### Body text

Limit text to short descriptions that relate directly to a particular item or control on the page.

#### Capitalization

Use sentence case.

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    |
| -------------------------------- | ---------- | --------------------------------------------- | ---------- |
| tooltip/max-width                | Component  | `var(--dds-tooltip-max-width)`                | —          |
| tooltip/gap                      | Component  | `var(--dds-tooltip-gap)`                      | —          |
| tooltip/padding                  | Component  | `var(--dds-tooltip-padding)`                  | —          |
| border/radius/xs                 | Semantic   | `var(--dds-border-radius-xs)`                 | —          |
| color/background/SURFACE/neutral | Semantic   | `var(--dds-color-background-surface-neutral)` | \#FFFFFF   |
| color/text/primary               | Semantic   | `var(--dds-color-text-primary)`               | \#1D2C3B   |
| Layout/Size/xs                   | —          | `var(--dds-layout-size-xs)`                   | —          |
| tooltip/internal-max-width       | Component  | `var(--dds-tooltip-internal-max-width)`       | —          |
| button/size/xs                   | Component  | `var(--dds-button-size-xs)`                   | —          |
| border/width/xs                  | Semantic   | `var(--dds-border-width-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   |
| color/background/SURFACE/neutral | —          | `var(--dds-color-background-surface-neutral)` | \#FFFFFF   |

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

Tooltips are containers that temporarily display non‑essential, contextual text. Users typically reveal them by hovering over an icon or another trigger.