Starbucks React Pattern Library

Notes

A styled container to bring attention to content. Tooltip is triggered by the child element that the Tooltip component wraps.

Props

bodyTextstring
Text for the body copy of tooltip content
childrenany
The element(s) that will trigger the showing and hiding of the tooltip
closeButtonAriaLabelstring['']
aria-label applied to tooltip close button
headingLeveloneOf('h2', 'h3', 'h4', 'h5', 'h6')['h2']
The heading element to be rendered, if headingText is being used. This defaults to h2
headingTextstring
Text for the heading copy of tooltip content
iconPathstring['']
Any icon path imported from this library, or a custom path. Defaults to sparkles icon path
tooltipClassNamestring['']
This class is applied to the main wrapper div of the tooltip
wrapperClassNamestring['']
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!
    <Tooltip
      bodyText="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>

<div style={{ height: '200px', paddingTop: '150px' }}>
  <div className="text-center pr9">Click the icon to see a tooltip appear!
    <Tooltip
      bodyText="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>

Tooltip

Notes

Props

Example: This example shows how the tooltip responds to being on the right edge of the screen