-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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.
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
ToolTip: refactor using ariakit #48440
Changes from 38 commits
73f1884
488f4c9
f69c2c8
ab1bc4e
60ee046
16d2d12
1aebcf9
0d20541
6d0eb21
cfb6c4a
32d654f
5386d21
53fd2cd
adc88cb
b18b13a
9ffb2c9
3e1fcca
324ba78
6f6d495
2eb848a
64062b4
e7088d1
a5c8ff3
5c94f87
e40a31c
60e0ac3
ca2fb50
89ad595
a415651
2207553
52fdc3d
800f258
875d9b5
fef59d6
60ff328
56c353d
4bd9455
ef7d837
814ad63
956bffd
beb9a29
8854357
26059b6
53a1f1c
dc53c00
bb98faf
50b7f5d
75e4ea5
ed4c6aa
cf59cd4
6c54d5c
45ba198
59fec6c
b43abd7
869bdde
968add1
5761d79
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The changelog needs to be updated, but I'll wait until the Popover changes are merged, and this PR is updated respectively. |
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. tests were checking |
ciampo marked this conversation as resolved.
Show resolved
Hide resolved
|
ciampo marked this conversation as resolved.
Show resolved
Hide resolved
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,8 @@ | ||
# Tooltip | ||
# ToolTip | ||
|
||
Tooltip is a React component to render floating help text relative to a node when it receives focus or when the user places the mouse cursor atop it. If the tooltip exceeds the bounds of the page in the direction it opens, its position will be flipped automatically. | ||
Tooltip is a React component to render floating help text relative to a node when it receives focus or it is hovered upon by a mouse. If the tooltip exceeds the bounds of the page in the direction it opens, its position will be flipped automatically. | ||
|
||
Accessibility note: the tooltip text is hidden from screen readers and assistive technologies that understand ARIA. To make it accessible, use an `aria-label` attribute on the same element the tooltip is applied to, preferably using the same text used for the tooltip. | ||
This component utilizes [Ariakit's tooltip](https://ariakit.org/components/tooltip) which is based on the [WAI-ARIA Tooltip Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/). | ||
|
||
ciampo marked this conversation as resolved.
Show resolved
Hide resolved
|
||
## Usage | ||
|
||
|
@@ -22,49 +22,38 @@ const MyTooltip = () => ( | |
|
||
The component accepts the following props: | ||
|
||
### position | ||
|
||
The direction in which the tooltip should open relative to its parent node. Specify y- and x-axis as a space-separated string. Supports `"top"`, `"bottom"` y axis, and `"left"`, `"center"`, `"right"` x axis. | ||
|
||
- Type: `String` | ||
- Required: No | ||
- Default: `"bottom"` | ||
|
||
### children | ||
#### `children`: `Element` | ||
|
||
The element to which the tooltip should anchor. | ||
|
||
**NOTE:** You must pass only a single child. Tooltip renders itself as a clone of `children` with a [`Popover`](/packages/components/src/popover/README.md) added as an additional child. | ||
**NOTE:** Accepts only one child element. | ||
|
||
- Type: `Element` | ||
- Required: Yes | ||
|
||
### text | ||
#### `delay`: `number` | ||
|
||
The tooltip text to show on focus or hover. | ||
The amount of time in milliseconds to wait before showing the tooltip. | ||
|
||
- Type: `String` | ||
- Required: No | ||
- Default: `700` | ||
|
||
#### `position`: `string` | ||
|
||
### shortcut (web only) | ||
The direction in which the tooltip should open relative to its parent node. Specify y- and x-axis as a space-separated string. Supports `"top"`, `"bottom"` y axis, and `"left"`, `"center"`, `"right"` x axis. | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think we've discussed this, but noting so we don't forget: Let's start the deprecation process for this ( |
||
- Type: `string` or `object` | ||
- Required: No | ||
- Default: `"bottom"` | ||
|
||
If shortcut is a string, it is expecting the display text. If shortcut is an object, it will accept the properties of `display` (string) and `ariaLabel` (string). | ||
#### `shortcut`: `string` | `object` | ||
|
||
### delay (web only) | ||
An option for adding accessible keyboard shortcuts. | ||
|
||
Time in milliseconds to wait before showing tooltip after the tooltip's visibility is toggled. This prop is currently only available for the web platforms. | ||
If shortcut is a string, it is expecting the display text. If shortcut is an object, it will accept the properties of `display`: `string` and `ariaLabel`: `string`. | ||
|
||
- Type: `Number` | ||
- Required: No | ||
- Default: 700 | ||
|
||
### visible (native only) | ||
#### `text`: `string` | ||
|
||
Whether the tooltip should be displayed on initial render. This prop is currently only available for the native mobile app built with React Native. | ||
The text shown in the tooltip when anchor element is focused or hovered. | ||
|
||
- Type: `Boolean` | ||
- Required: No | ||
- Default: `false` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We no longer have a custom event catcher