Starbucks Pattern Library

Tooltip

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>

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