Skip to content

Commit

Permalink
Review
Browse files Browse the repository at this point in the history
  • Loading branch information
mbrookes authored and oliviertassinari committed Oct 9, 2019
1 parent e07adaf commit c00a3f3
Show file tree
Hide file tree
Showing 3 changed files with 8 additions and 5 deletions.
9 changes: 6 additions & 3 deletions docs/src/pages/components/buttons/buttons.md
Original file line number Diff line number Diff line change
Expand Up @@ -139,8 +139,8 @@ Here is an [integration example with react-router](/guides/composition/#button).

### Cursor not-allowed

Material-UI's ButtonBase component set `pointer-events: none;` on disabled buttons.
This tradeoff prevents the usage of a different disabled cursor.
The ButtonBase component sets `pointer-events: none;` on disabled buttons.
which prevents the appearance of a disabled cursor.

If you wish to use `not-allowed`, you have two options:

Expand All @@ -153,7 +153,10 @@ If you wish to use `not-allowed`, you have two options:
}
```

However, you should add `pointer-events: none;` back when you need to display [tooltips on disabled elements](/components/tooltips/#disabled-elements) and the cursor won't change if you render something else than a button element, for instance, a link `<a>` element.
However:

- You should add `pointer-events: none;` back when you need to display [tooltips on disabled elements](/components/tooltips/#disabled-elements)
- The cursor won't change if you render something other than a button element, for instance, a link `<a>` element.

2. **DOM change**. You can wrap the button:

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/tooltips/tooltips.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ A tooltip can be interactive. It won't close when the user hovers over the toolt

## Disabled Elements

By default disabled elements like `<button>` do not trigger user interactions so a `Tooltip` will not activate on normal events like hover. To accommodate disabled elements, add a simple wrapper element like a `span`.
By default disabled elements like `<button>` do not trigger user interactions so a `Tooltip` will not activate on normal events like hover. To accommodate disabled elements, add a simple wrapper element, such as a `span`.

{{"demo": "pages/components/tooltips/DisabledTooltips.js"}}

Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/Tooltip/Tooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
'A disabled element does not fire events.',
"Tooltip needs to listen to the child element's events to display the title.",
'',
'Add a simple wrapper element like a `span`.',
'Add a simple wrapper element, such as a `span`.',
].join('\n'),
);
}
Expand Down

0 comments on commit c00a3f3

Please sign in to comment.