Skip to content

Commit 91649d4

Browse files
authored
Merge pull request #676 from primer/tooltip
docs: Explain why .tooltipped should be used sparingly
2 parents aefa90d + 3dd48ca commit 91649d4

File tree

1 file changed

+5
-1
lines changed

1 file changed

+5
-1
lines changed

src/tooltips/README.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,11 @@ Add tooltips built entirely in CSS to nearly any element.
4747

4848
## Implementation and accessibility
4949

50-
**Attention**: we use `aria-label` for tooltips instead of something like `data-tooltip` because it is crucial that the tooltip content is available for screen reader users as well. However, `aria-label` **replaces** the text content of an element for screen reader users, so only use tooltip if there is no better way to present the information, or consider using `title` for supplement information.
50+
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.
51+
52+
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?
53+
54+
**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.
5155

5256
**Note:** Tooltip classes will conflict with Octicon styles, and as such, must be applied to the parent element instead of the icon.
5357

0 commit comments

Comments
 (0)