forked from primer/react
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Revert accessible Tooltip + IconButton (primer#2092)
* Revert "Fix ActionMenu with IconButton (primer#2084)" This reverts commit 3204599. * Revert 2069 + 2006 + 2084
- Loading branch information
1 parent
9ba988a
commit 36afe56
Showing
28 changed files
with
1,052 additions
and
1,347 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
--- | ||
componentId: tooltip | ||
title: Tooltip | ||
status: Alpha | ||
--- | ||
|
||
The Tooltip component adds a tooltip to add context to elements on the page. | ||
|
||
**_⚠️ Usage warning! ⚠️_** | ||
|
||
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 Tooltip on elements with no existing text content, or consider using `title` for supplemental information. | ||
|
||
## Default example | ||
|
||
```jsx live | ||
<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} p={3}> | ||
<Tooltip aria-label="Hello, Tooltip!">Text with a tooltip</Tooltip> | ||
</Box> | ||
``` | ||
|
||
## Component props | ||
|
||
| Name | Type | Default | Description | | ||
| :--------- | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------------------ | | ||
| align | String | | Can be either `left` or `right`. | | ||
| direction | String | | Can be one of `n`, `ne`, `e`, `se`, `s`, `sw`, `w`, `nw`. Sets where the tooltip renders in relation to the target. | | ||
| noDelay | Boolean | | When set to `true`, tooltip appears without any delay | | ||
| aria-label | String | | Text used in `aria-label` (for accessibility). | | ||
| wrap | Boolean | | Use `true` to allow text within tooltip to wrap. | | ||
| sx | SystemStyleObject | {} | Style to be applied to the component | |
This file was deleted.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.