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}
+