diff --git a/docs/src/pages/demos/tooltips/DisabledTooltips.js b/docs/src/pages/demos/tooltips/DisabledTooltips.js new file mode 100644 index 00000000000000..9fe32a1323f366 --- /dev/null +++ b/docs/src/pages/demos/tooltips/DisabledTooltips.js @@ -0,0 +1,15 @@ +import React from 'react'; +import Button from '@material-ui/core/Button'; +import Tooltip from '@material-ui/core/Tooltip'; + +function DisabledTooltips() { + return ( + + + + + + ); +} + +export default DisabledTooltips; diff --git a/docs/src/pages/demos/tooltips/tooltips.md b/docs/src/pages/demos/tooltips/tooltips.md index b5bc40cbff2d0f..59727cf1048860 100644 --- a/docs/src/pages/demos/tooltips/tooltips.md +++ b/docs/src/pages/demos/tooltips/tooltips.md @@ -46,6 +46,12 @@ On mobile, the tooltip is displayed when the user longpresses the element and hi {{"demo": "pages/demos/tooltips/DelayTooltips.js"}} +## 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 accomodate disabled elements, add a simple wrapper element like a `span`. + +{{"demo": "pages/demos/tooltips/DisabledTooltips.js"}} + ## Customized Tooltips {{"demo": "pages/demos/tooltips/CustomizedTooltips.js"}} diff --git a/pages/demos/tooltips.js b/pages/demos/tooltips.js index 4b303049d5ab07..7c10b8cc4547d3 100644 --- a/pages/demos/tooltips.js +++ b/pages/demos/tooltips.js @@ -55,6 +55,13 @@ module.exports = require('fs') raw: preval` module.exports = require('fs') .readFileSync(require.resolve('docs/src/pages/demos/tooltips/CustomizedTooltips'), 'utf8') +`, + }, + 'pages/demos/tooltips/DisabledTooltips.js': { + js: require('docs/src/pages/demos/tooltips/DisabledTooltips').default, + raw: preval` +module.exports = require('fs') + .readFileSync(require.resolve('docs/src/pages/demos/tooltips/DisabledTooltips'), 'utf8') `, }, }}