Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Deprecate CSS tooltip #1936

Merged
merged 4 commits into from
Feb 11, 2022
Merged

Deprecate CSS tooltip #1936

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
934c56b
deprecate tooltip css
khiga8 Feb 11, 2022
13ea949
update examples
khiga8 Feb 11, 2022
1aa3283
Merge branch 'main' into kh-deprecate_tooltip_please
khiga8 Feb 11, 2022
7dd10eb
Create wise-cameras-leave.md
jonrohan Feb 11, 2022
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
5 changes: 5 additions & 0 deletions .changeset/wise-cameras-leave.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/css": minor
---

Deprecating `.tooltipped` CSS classes
87 changes: 45 additions & 42 deletions docs/content/components/tooltips.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,62 @@
---
title: Tooltips
path: components/tooltips
status: Stable
status: Deprecated
source: 'https://github.com/primer/css/tree/main/src/tooltips'
bundle: tooltips
---

<Note>
Please note that the `.tooltipped` component is **deprecated**.
</Note>

Add tooltips built entirely in CSS to nearly any element.


Add tooltips built entirely in CSS to appropriate elements.

## Implementation and accessibility

Tooltips as a UI pattern should be our last resort for conveying information because it is hidden by default and often with zero or little visual indicator of its existence.

Before adding a tooltip, please consider: Is this information essential and necessary* Can the UI be made clearer? Can the information be shown on the page by default?

**Attention**: we use `aria-label` for tooltip contents, because it is crucial that they are accessible to screen reader users. However, `aria-label` **replaces** the text content of an element in screen readers, so only use `.tooltipped` on elements with no existing text content, or consider using `title` for supplemental information.
### Attention

**Note:** Tooltip classes will conflict with Octicon styles, and as such, must be applied to the parent element instead of the icon.
- **Never** use tooltips on static elements. They should only be used on interactive elements, because users cannot tab-focus into static elements, which may make the content inaccessible for keyboard-only users and screen readers.
- we use `aria-label` for tooltip contents, because it is crucial that they are accessible to screen reader users. However, `aria-label` **replaces** the text content of an element in screen readers, so only use `.tooltipped` on elements with no existing text content such as an icon-only button.
- Tooltip classes will conflict with Octicon styles, and as such, must be applied to the parent element instead of the icon.

## Tooltip direction
Specify the direction of a tooltip with north, south, east, and west directions:

```html live
<div class="d-flex flex-justify-center pt-4">
<span class="tooltipped tooltipped-nw m-2 p-2 border" aria-label="This is the tooltip on the North West side.">
<button type="button" class="tooltipped tooltipped-nw m-2 p-2 border" aria-label="This is the tooltip on the North West side.">
.tooltipped-nw
</span>
<span class="tooltipped tooltipped-n m-2 p-2 border" aria-label="This is the tooltip on the North side.">
</button>
<button type="button" class="tooltipped tooltipped-n m-2 p-2 border" aria-label="This is the tooltip on the North side.">
.tooltipped-n
</span>
<span class="tooltipped tooltipped-ne m-2 p-2 border" aria-label="This is the tooltip on the North East side.">
</button>
<button type="button" class="tooltipped tooltipped-ne m-2 p-2 border" aria-label="This is the tooltip on the North East side.">
.tooltipped-ne
</span>
</button>
</div>
<div class="d-flex flex-justify-center">
<span class="tooltipped tooltipped-w m-2 p-2 border" aria-label="This is the tooltip on the West side.">
<button type="button" class="tooltipped tooltipped-w m-2 p-2 border" aria-label="This is the tooltip on the West side.">
.tooltipped-w
</span>
<span class="tooltipped tooltipped-e m-2 p-2 border" aria-label="This is the tooltip on the East side.">
</button>
<button type="button" class="tooltipped tooltipped-e m-2 p-2 border" aria-label="This is the tooltip on the East side.">
.tooltipped-e
</span>
</button>
</div>
<div class="d-flex flex-justify-center pb-4">
<span class="tooltipped tooltipped-sw m-2 p-2 border" aria-label="This is the tooltip on the South West side.">
<button type="button" class="tooltipped tooltipped-sw m-2 p-2 border" aria-label="This is the tooltip on the South West side.">
.tooltipped-sw
</span>
<span class="tooltipped tooltipped-s m-2 p-2 border" aria-label="This is the tooltip on the South side.">
</button>
<button type="button" class="tooltipped tooltipped-s m-2 p-2 border" aria-label="This is the tooltip on the South side.">
.tooltipped-s
</span>
<span class="tooltipped tooltipped-se m-2 p-2 border" aria-label="This is the tooltip on the South East side.">
</button>
<button type="button" class="tooltipped tooltipped-se m-2 p-2 border" aria-label="This is the tooltip on the South East side.">
.tooltipped-se
</span>
</button>
</div>
```

Expand All @@ -62,36 +65,36 @@ Align tooltips to the left or right of an element, combined with a directional c

```html live
<div class="d-flex flex-justify-center pt-4">
<span class="tooltipped tooltipped-nw tooltipped-align-right-1 m-2 p-2 border" aria-label="Tooltipped NW and aligned right.">
<button type="button" class="tooltipped tooltipped-nw tooltipped-align-right-1 m-2 p-2 border" aria-label="Tooltipped NW and aligned right.">
.tooltipped-nw .tooltipped-align-right-1
</span>
<span class="tooltipped tooltipped-ne tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped NE and aligned left.">
</button>
<button type="button" class="tooltipped tooltipped-ne tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped NE and aligned left.">
.tooltipped-ne .tooltipped-align-left-1
</span>
</button>
</div>
<div class="d-flex flex-justify-center">
<span class="tooltipped tooltipped-nw tooltipped-align-right-2 m-2 p-2 border" aria-label="Tooltipped NW and aligned right.">
<button type="button" class="tooltipped tooltipped-nw tooltipped-align-right-2 m-2 p-2 border" aria-label="Tooltipped NW and aligned right.">
.tooltipped-nw .tooltipped-align-right-2
</span>
<span class="tooltipped tooltipped-ne tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped NE and aligned left.">
</button>
<button type="button" class="tooltipped tooltipped-ne tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped NE and aligned left.">
.tooltipped-ne .tooltipped-align-left-2
</span>
</button>
</div>
<div class="d-flex flex-justify-center">
<span class="tooltipped tooltipped-sw tooltipped-align-right-1 m-2 p-2 border" aria-label="Tooltipped SE and aligned right.">
<button type="button" class="tooltipped tooltipped-sw tooltipped-align-right-1 m-2 p-2 border" aria-label="Tooltipped SE and aligned right.">
.tooltipped-sw .tooltipped-align-right-1
</span>
<span class="tooltipped tooltipped-se tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped SW and aligned left.">
</button>
<button type="button" class="tooltipped tooltipped-se tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped SW and aligned left.">
.tooltipped-se .tooltipped-align-left-1
</span>
</button>
</div>
<div class="d-flex flex-justify-center pb-4">
<span class="tooltipped tooltipped-sw tooltipped-align-right-2 m-2 p-2 border" aria-label="Tooltipped SE and aligned right.">
<button type="button" class="tooltipped tooltipped-sw tooltipped-align-right-2 m-2 p-2 border" aria-label="Tooltipped SE and aligned right.">
.tooltipped-sw .tooltipped-align-right-2
</span>
<span class="tooltipped tooltipped-se tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped SW and aligned left.">
</button>
<button type="button" class="tooltipped tooltipped-se tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped SW and aligned left.">
.tooltipped-se .tooltipped-align-left-2
</span>
</button>
</div>
```

Expand All @@ -101,9 +104,9 @@ Use `.tooltipped-multiline` when you have long content. This style has some limi

```html live
<div class="d-flex flex-justify-center pt-6">
<span class="tooltipped tooltipped-n tooltipped-multiline m-2 p-2 border" aria-label="This is the tooltip with multiple lines. This is the tooltip with multiple lines.">
<button type="button" class="tooltipped tooltipped-n tooltipped-multiline m-2 p-2 border" aria-label="This is the tooltip with multiple lines. This is the tooltip with multiple lines.">
.tooltipped-multiline
</span>
</button>
</div>
```

Expand All @@ -113,8 +116,8 @@ By default the tooltips have a slight delay before appearing. This is to keep mu

```html live
<div class="d-flex flex-justify-center pt-4">
<span class="tooltipped tooltipped-n tooltipped-no-delay m-2 p-2 border" aria-label="This is the tooltip on the no delay side.">
<button type="button" class="tooltipped tooltipped-n tooltipped-no-delay m-2 p-2 border" aria-label="This is the tooltip on the no delay side.">
.tooltipped-no-delay
</span>
</button>
</div>
```