diff --git a/packages/react/src/components/Tooltip/Tooltip-story.js b/packages/react/src/components/Tooltip/Tooltip-story.js index af45fe898246..365986947235 100644 --- a/packages/react/src/components/Tooltip/Tooltip-story.js +++ b/packages/react/src/components/Tooltip/Tooltip-story.js @@ -92,8 +92,8 @@ storiesOf('Tooltip', module) 'default (bottom)', () => (
- -

+ +

This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed please use a modal instead. diff --git a/packages/react/src/components/Tooltip/Tooltip.js b/packages/react/src/components/Tooltip/Tooltip.js index 5a22adb2e107..993d91f98e77 100644 --- a/packages/react/src/components/Tooltip/Tooltip.js +++ b/packages/react/src/components/Tooltip/Tooltip.js @@ -97,6 +97,11 @@ class Tooltip extends Component { */ tooltipId: PropTypes.string, + /** + * The ID of the tooltip body content. + */ + tooltipBodyId: PropTypes.string, + /** * Optional starting value for uncontrolled state */ @@ -369,6 +374,7 @@ class Tooltip extends Component { `__carbon-tooltip_${Math.random() .toString(36) .substr(2)}`), + tooltipBodyId, children, className, triggerClassName, @@ -412,6 +418,7 @@ class Tooltip extends Component { onMouseOut: this.handleMouse, onFocus: this.handleMouse, onBlur: this.handleMouse, + 'aria-controls': !open ? undefined : tooltipId, 'aria-haspopup': 'true', 'aria-expanded': open, 'aria-describedby': open ? tooltipId : null, @@ -469,7 +476,14 @@ class Tooltip extends Component { onContextMenu={this.handleMouse} role="tooltip"> - {children} +

+ {children} +
)}