Skip to content

Commit c53ecdf

Browse files
khiga8jonrohan
khiga8
and
jonrohan
authored
Deprecate CSS tooltip (#1936)
* deprecate tooltip css * update examples * Create wise-cameras-leave.md Co-authored-by: Jon Rohan <yes@jonrohan.codes>
1 parent 50221a5 commit c53ecdf

File tree

2 files changed

+50
-42
lines changed

2 files changed

+50
-42
lines changed

‎.changeset/wise-cameras-leave.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/css": minor
3+
---
4+
5+
Deprecating `.tooltipped` CSS classes

‎docs/content/components/tooltips.md‎

Lines changed: 45 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,62 @@
11
---
22
title: Tooltips
33
path: components/tooltips
4-
status: Stable
4+
status: Deprecated
55
source: 'https://github.com/primer/css/tree/main/src/tooltips'
66
bundle: tooltips
77
---
88

9+
<Note>
10+
Please note that the `.tooltipped` component is **deprecated**.
11+
</Note>
912

10-
Add tooltips built entirely in CSS to nearly any element.
11-
12-
13+
Add tooltips built entirely in CSS to appropriate elements.
1314

1415
## Implementation and accessibility
1516

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

1819
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?
1920

20-
**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.
21+
### Attention
2122

22-
**Note:** Tooltip classes will conflict with Octicon styles, and as such, must be applied to the parent element instead of the icon.
23+
- **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.
24+
- 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.
25+
- Tooltip classes will conflict with Octicon styles, and as such, must be applied to the parent element instead of the icon.
2326

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

2730
```html live
2831
<div class="d-flex flex-justify-center pt-4">
29-
<span class="tooltipped tooltipped-nw m-2 p-2 border" aria-label="This is the tooltip on the North West side.">
32+
<button type="button" class="tooltipped tooltipped-nw m-2 p-2 border" aria-label="This is the tooltip on the North West side.">
3033
.tooltipped-nw
31-
</span>
32-
<span class="tooltipped tooltipped-n m-2 p-2 border" aria-label="This is the tooltip on the North side.">
34+
</button>
35+
<button type="button" class="tooltipped tooltipped-n m-2 p-2 border" aria-label="This is the tooltip on the North side.">
3336
.tooltipped-n
34-
</span>
35-
<span class="tooltipped tooltipped-ne m-2 p-2 border" aria-label="This is the tooltip on the North East side.">
37+
</button>
38+
<button type="button" class="tooltipped tooltipped-ne m-2 p-2 border" aria-label="This is the tooltip on the North East side.">
3639
.tooltipped-ne
37-
</span>
40+
</button>
3841
</div>
3942
<div class="d-flex flex-justify-center">
40-
<span class="tooltipped tooltipped-w m-2 p-2 border" aria-label="This is the tooltip on the West side.">
43+
<button type="button" class="tooltipped tooltipped-w m-2 p-2 border" aria-label="This is the tooltip on the West side.">
4144
.tooltipped-w
42-
</span>
43-
<span class="tooltipped tooltipped-e m-2 p-2 border" aria-label="This is the tooltip on the East side.">
45+
</button>
46+
<button type="button" class="tooltipped tooltipped-e m-2 p-2 border" aria-label="This is the tooltip on the East side.">
4447
.tooltipped-e
45-
</span>
48+
</button>
4649
</div>
4750
<div class="d-flex flex-justify-center pb-4">
48-
<span class="tooltipped tooltipped-sw m-2 p-2 border" aria-label="This is the tooltip on the South West side.">
51+
<button type="button" class="tooltipped tooltipped-sw m-2 p-2 border" aria-label="This is the tooltip on the South West side.">
4952
.tooltipped-sw
50-
</span>
51-
<span class="tooltipped tooltipped-s m-2 p-2 border" aria-label="This is the tooltip on the South side.">
53+
</button>
54+
<button type="button" class="tooltipped tooltipped-s m-2 p-2 border" aria-label="This is the tooltip on the South side.">
5255
.tooltipped-s
53-
</span>
54-
<span class="tooltipped tooltipped-se m-2 p-2 border" aria-label="This is the tooltip on the South East side.">
56+
</button>
57+
<button type="button" class="tooltipped tooltipped-se m-2 p-2 border" aria-label="This is the tooltip on the South East side.">
5558
.tooltipped-se
56-
</span>
59+
</button>
5760
</div>
5861
```
5962

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

6366
```html live
6467
<div class="d-flex flex-justify-center pt-4">
65-
<span class="tooltipped tooltipped-nw tooltipped-align-right-1 m-2 p-2 border" aria-label="Tooltipped NW and aligned right.">
68+
<button type="button" class="tooltipped tooltipped-nw tooltipped-align-right-1 m-2 p-2 border" aria-label="Tooltipped NW and aligned right.">
6669
.tooltipped-nw .tooltipped-align-right-1
67-
</span>
68-
<span class="tooltipped tooltipped-ne tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped NE and aligned left.">
70+
</button>
71+
<button type="button" class="tooltipped tooltipped-ne tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped NE and aligned left.">
6972
.tooltipped-ne .tooltipped-align-left-1
70-
</span>
73+
</button>
7174
</div>
7275
<div class="d-flex flex-justify-center">
73-
<span class="tooltipped tooltipped-nw tooltipped-align-right-2 m-2 p-2 border" aria-label="Tooltipped NW and aligned right.">
76+
<button type="button" class="tooltipped tooltipped-nw tooltipped-align-right-2 m-2 p-2 border" aria-label="Tooltipped NW and aligned right.">
7477
.tooltipped-nw .tooltipped-align-right-2
75-
</span>
76-
<span class="tooltipped tooltipped-ne tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped NE and aligned left.">
78+
</button>
79+
<button type="button" class="tooltipped tooltipped-ne tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped NE and aligned left.">
7780
.tooltipped-ne .tooltipped-align-left-2
78-
</span>
81+
</button>
7982
</div>
8083
<div class="d-flex flex-justify-center">
81-
<span class="tooltipped tooltipped-sw tooltipped-align-right-1 m-2 p-2 border" aria-label="Tooltipped SE and aligned right.">
84+
<button type="button" class="tooltipped tooltipped-sw tooltipped-align-right-1 m-2 p-2 border" aria-label="Tooltipped SE and aligned right.">
8285
.tooltipped-sw .tooltipped-align-right-1
83-
</span>
84-
<span class="tooltipped tooltipped-se tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped SW and aligned left.">
86+
</button>
87+
<button type="button" class="tooltipped tooltipped-se tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped SW and aligned left.">
8588
.tooltipped-se .tooltipped-align-left-1
86-
</span>
89+
</button>
8790
</div>
8891
<div class="d-flex flex-justify-center pb-4">
89-
<span class="tooltipped tooltipped-sw tooltipped-align-right-2 m-2 p-2 border" aria-label="Tooltipped SE and aligned right.">
92+
<button type="button" class="tooltipped tooltipped-sw tooltipped-align-right-2 m-2 p-2 border" aria-label="Tooltipped SE and aligned right.">
9093
.tooltipped-sw .tooltipped-align-right-2
91-
</span>
92-
<span class="tooltipped tooltipped-se tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped SW and aligned left.">
94+
</button>
95+
<button type="button" class="tooltipped tooltipped-se tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped SW and aligned left.">
9396
.tooltipped-se .tooltipped-align-left-2
94-
</span>
97+
</button>
9598
</div>
9699
```
97100

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

102105
```html live
103106
<div class="d-flex flex-justify-center pt-6">
104-
<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.">
107+
<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.">
105108
.tooltipped-multiline
106-
</span>
109+
</button>
107110
</div>
108111
```
109112

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

114117
```html live
115118
<div class="d-flex flex-justify-center pt-4">
116-
<span class="tooltipped tooltipped-n tooltipped-no-delay m-2 p-2 border" aria-label="This is the tooltip on the no delay side.">
119+
<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.">
117120
.tooltipped-no-delay
118-
</span>
121+
</button>
119122
</div>
120123
```

0 commit comments

Comments
 (0)