Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Comment thread
bekah-stephens marked this conversation as resolved.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if we remove the input bar from these examples, so we can make the label/icon larger? I'm having a hard time seeing the hover state in this picture is all

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See if the updated image is better?

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,36 @@ related: [
'Tooltip'
]
---


import '../components.css';

## Usage
Popovers are commonly used on form field labels, page titles or headings, or table column headings. Use popovers to:
- Anticipate and answer questions for the user.
- Help explain unfamiliar terms.
- Provide context around a task.

<img src="./img/popover-email.png" alt="popover for an email address form field explaining what the email address is used for" width="1500"/>
<div class="ws-docs-content-img">
![Example showing a popover on a form field label.](./img/popover-usage.svg)
</div>

When using a default popover to define a term or explain a concept, use a gray question-circle icon. Upon hover or click, the icon turns black.

<img src="./img/popovers-colors.png" alt="Popover icon colors depending on state" width="481"/>
<div class="ws-docs-content-img">
![Examples of the different popover icon states.](./img/popover-states.svg)
</div>

To provide more information to a user without an accompanying UI element, you can add a popover to a linked question.

<img src="./img/popovers-2.png" alt="popover for a linked question" width="1500"/>
<div class="ws-docs-content-img">
![Example showing a popover on a linked question.](./img/popover-linked-question.svg)
</div>

Use link button styling for the linked question, and add a blue question-circle icon before it. Clicking the link text triggers a popover, which answers the linked question.

<img src="./img/alert_popover_usage.png" alt="alert popover opens when user clicks or hovers over an alert label" width="1500"/>
<div class="ws-docs-content-img">
![Example showing an alert popover on a label in a table.](./img/popover-alert.svg)
</div>

To provide additional information about an alert, use an alert popover. The alert popover will open upon hover or click.

Expand All @@ -40,12 +50,15 @@ Both [tooltips](/components/tooltip/design-guidelines) and popovers provide more
For information on other forms of on-screen help, see [Tooltip](/components/tooltip/design-guidelines) and [Hint](/components/hint/design-guidelines).

## Behavior

<div class="ws-docs-content-img">
![Example showing the different ways that a popover can be dismissed.](./img/popover-behavior.svg)
</div>

Popovers are triggered when a user clicks on the popover icon and are dismissed in one of the following ways:
- The user clicks the exit icon.
- The user clicks anywhere on the screen outside the popover.
- The user clicks an action button inside the popover. (Note: This won't always close the popover; it depends on the action button.)

<img src="./img/popover-example.png" alt="popover example with placeholder text for the title and informational text" width="300"/>
1. The user clicks the exit icon.
2. The user clicks anywhere on the screen outside the popover.
3. The user clicks an action button inside the popover. (Note: This won't always close the popover; it depends on the action button.)

## Variations

Expand All @@ -55,7 +68,9 @@ These popovers are plain-text and do not include icons. They are used to convey
### Alert popovers
These popover are similar to default popovers, the key difference being the inclusion of status-like headers for the following alert types: default, info, success, warning, and danger.

<img src="./img/alert_popover_examples.png" alt="alert popover examples with placeholder text for the title and informational text" width="300"/>
<div class="ws-docs-content-img">
![Example of the different kinds of alert popovers.](./img/popover-variations-alert.svg)
</div>

## Content considerations
- Popover copy is longer than tooltip copy, but it should still be concise. Aim for 1–3 sentences.
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,35 @@ id: Tooltip
section: components
---

import '../components.css';

For information on other forms of on-screen help, see [popover](/components/popover/design-guidelines) and [hint](/components/hint/design-guidelines).

## Usage
Use tooltips to:
- Provide labels for unlabeled icons.

<img src="./img/tooltip-on-unlabeled-icons.png" alt="table with tooltip on an unlabeled kebab icon to provide more information" width="1489"/>
<div class="ws-docs-content-img">
![Example showing a tooltip on an unlabeled kebab icon in a toolbar.](./img/kebab-icon.svg)
</div>

- Provide additional information on a data point or element in a chart or table.

<img src="./img/tooltip-on-bar-chart.png" alt='bar chart with a tooltip on data point to describe it as Asia Pacific' width='612'/>
<div class="ws-docs-content-img">
![Example showing a tooltip on a data point in a bar chart.](./img/bar-chart.svg)
</div>

- Define new or unfamiliar UI elements that aren’t described directly in the user interface. For example, you can use a tooltip on a disabled button.

<img src="./img/tooltip-on-disabled-button.png" alt= 'table with tooltip on a disabled edit button to provide more information regarding access' width='1500'/>
<div class="ws-docs-content-img">
![Example showing a tooltip on a disabled edit button.](./img/disabled-button.svg)
</div>

- Provide additional information on text or labels on hover. A way for users to see more information before clicking the element and being directed to a new page or producing an action on the page.

<img src="./img/tooltip-on-hyperlink.png" alt= 'table with tooltip on clickable text to provide more information' width='1489'/>
<div class="ws-docs-content-img">
![Example showing a tooltip on a hyperlink.](./img/on-hyperlink.svg)
</div>

### Tooltip delay on hover
By default, tooltips have a 300ms entry delay when hovering over an object. Although this is the recommended delay time, you may customize it via prop. For example, if you have a tooltip on an icon, and you would like for it to appear immediately on hover, you may set the delay to 0 ms.
Expand Down