<h2>When to use</h2>
<p>Tooltip is similar to popover but is 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>Tooltip</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="https://www.delldesignsystem.com/patterns/chart-customization/">Data visualization tooltip</a></td>
<td>Data visualization tooltip (DV tooltip) is designed specifically for data visualization components and is designed to highlight values associated with data points.</td>
</tr>
<tr>
<td><a href="/components/popover/">Popover</a></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>
</tbody></table>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"A tooltip with parts labelled 1 and 2.","caption":"1. Body text: comprises of a concise definition or description of the target or target’s reference.\n2. Pointer: directs user’s attention to the source element that triggered the tooltip.","url":"https://dds.dell.com/site/production/8c/1f/Anatomy_3_1_9d094c26bd.png"}]' data-numberofcolumns='1'></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'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Use tooltips for secondary or supplemental information. If the information is critical, place it on the page so that the user doesn’t miss it. Do not use tooltips to display error or status messages, long passages of text, images, or interactive content.

### Form fields

Tooltips should be used as a source of additional context for [form](/patterns/form/) fields. When instructional content is required to help the user complete a form, use helper text. Don't repeat the same text in a tooltip.

<details data-name='image-block' data-images='[{"alt":"An image of a form with a tooltip hovering over a field.","caption":"The trigger is often a button, icon, link, or a combination of elements.","url":"https://dds.dell.com/site/production/00/c9/Usage1_2_1_d3508befc2.png"}]' data-numberofcolumns='1'></details>

### Truncated content

Use tooltips to show the full line of truncated information, such as the file name in the [file input component](/components/file-input/).

<details data-name='image-block' data-images='[{"alt":"An image of a tooltip hovering over a file name.","caption":"Tooltip can make space for nonessential content.","url":"https://dds.dell.com/site/production/21/e6/Usage2_2_1_fd38b09584.png"}]' data-numberofcolumns='1'></details>

### Data in charts

Two preformatted tooltips, DV tooltip and multi-series tooltip, are provided in the [Data Visualization library Figma kit](https://www.figma.com/file/a1X9m1vTZdG3N6xV5G9bz4/Data-Visualization?node-id=5-5466&t=0VvW9TMTdxFrbRde-0) and are intended for use within charts only. 

* DV tooltips are intended for charts plotting a single series of data, where each data point correlates to its own tooltip. 
* Multi-series tooltips are for charts showing multiple series of data within its plot area. These two types cannot be mixed within the same chart.

The layout within the tooltip includes placeholders for labels and values to ensure consistent implementation. There are no behavioral changes regarding data visualization tooltips. You can review customization guidance on 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":"Tooltip being activated when hovering over a point on a line chart.","url":"https://dds.dell.com/site/production/33/4c/DV_Tooltip_Usage_v2_a652137190.png"}]' data-numberofcolumns='1'></details>

## Layout

### Alignment

Consider the page elements when choosing the default position of a tooltip. Constraints, such as screen size, will override the default positioning to ensure the tooltip is always within the viewport. For example, a tooltip with a bottom-start selection will automatically flip to top-start placement if there is not enough room on the screen below the trigger element. 

On S and XS [breakpoints](/foundations/grid/#breakpoints), the trigger element may not provide the opportunity to use one of the orientations of tooltip pointer. In this case, the tooltip is set to no pointer and positioned above the element.\
\
Position and pointer are shown separately in Figma for easy scanning and selection. However, these are considered a single property, called “placement”, in [Storybook documentation](https://vanilla.delldesignsystem.com/index.html?path=/docs/components-tooltip--basic).

#### Position

Tooltips use four positions in relation to the trigger element: bottom, top, left, and right. Make sure the direction and position of your tooltip don’t obscure information on the page that the tooltip content is directly related to.

<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/production/e5/52/Postion_3_1_c42a0157b1.png"}]' data-numberofcolumns='1'></details>

| Selection | Description                 |
| --------- | --------------------------- |
| Top       | Above the trigger (default) |
| Bottom    | Below the trigger           |
| Left      | To the left of the trigger  |
| Right     | To the right of the trigger |

#### Pointer

Tooltip has four pointer options: start, center, end, and no pointer. Center is the default pointer position. If the tooltip does not fit without being clipped by the side of the page, then it should dynamically pick a pointer orientation that fits in the space between the [grid margins](/foundations/grid/#margins).

<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/production/9b/98/Pointer_3_1_9f3817a476.png"}]' data-numberofcolumns='1'></details>

| Selection  | Description                                                                  |
| ---------- | ---------------------------------------------------------------------------- |
| Center     | When tooltip is set to top, the pointer points down to the trigger (default) |
| Start      | Top, or left in left-to-right localizations                                  |
| End        | Bottom, or right in left-to-right localizations                              |
| No pointer | Tooltip shown without a pointer                                              |

## Interaction

### Behavior and states

Tooltips are activated upon focus state, or when a user hovers over a trigger element. To dismiss the tooltip, stop hovering or focusing the trigger element. Tooltips are always activated and dismissed by press on mobile. Mobile tooltips require a close [icon](/foundations/icons/) to dismiss.

<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/production/fd/82/Behavior_and_States_2_1_7eb7f9b43e.png"}]' data-numberofcolumns='1'></details>

| State                        | Behavior                                                                                 |
| ---------------------------- | ---------------------------------------------------------------------------------------- |
| Hover                        | Hovering on the trigger element activates the tooltip on desktop.                        |
| Focus (initial tab or press) | One tab focuses on the dismiss icon in desktop tooltips. 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

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

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?id=components-tooltip--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-tooltip--basic)

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-tooltip--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=/story/components-tooltip--basic)

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

Tooltips are containers that temporarily display short, contextual text that is not critical information. They are typically activated when a user hovers over an icon or other trigger.

Tooltip

React update

<p>The DDS React library now contains all components available in the Angular and Vanilla component libraries.</p>
