HomeStarbucks 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

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