Tooltip
Notes
A styled container to bring attention to content. Tooltip is triggered by the child element that the Tooltip component wraps.
Props
- bodyText
string
Text for the body copy of tooltip content
- children
any
The element(s) that will trigger the showing and hiding of the tooltip
- closeButtonAriaLabel
string
['']
aria-label applied to tooltip close button
- headingLevel
oneOf('h2', 'h3', 'h4', 'h5', 'h6')
['h2']
The heading element to be rendered, if
headingText
is being used. This defaults toh2
- headingText
string
Text for the heading copy of tooltip content
- iconPath
string
['']
Any icon path imported from this library, or a custom path. Defaults to sparkles icon path
- tooltipClassName
string
['']
This class is applied to the main wrapper
div
of the tooltip - wrapperClassName
string
['']
This class is applied to the
div
that surrounds the tooltip and children/trigger element
<div style={{ height: '200px', paddingTop: '150px' }}><div className="text-center pr9">Click the icon to see a tooltip appear!<TooltipbodyText="and with a body!"closeButtonAriaLabel="close"headingText= "This is a sparkly tooltip with a heading!"><IconButton ariaLabel='Show for tooltip' path={ iconPaths.info }/></Tooltip></div></div>