@leafygreen-ui/guide-cue v5.0.8

GuideCue

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/guide-cue

NPM

npm install @leafygreen-ui/guide-cue

Example

Stand-alone example

import { GuideCue } from '@leafygreen-ui/guide-cue';

const [open, setOpen] = useState(true);

<GuideCue
  open={open}
  setOpen={setOpen}
  title="New feature"
  refEl={triggerRef}
  numberOfSteps={1}
  currentStep={1}
  onPrimaryButtonClick={() => {
    // do something
  }}
>
  This is a new feature. You should try it out
</GuideCue>;

or

Multi-step example

import GuideCue from '@leafygreen-ui/guide-cue';

const [open, setOpen] = useState(true);

<GuideCue
  open={open}
  setOpen={setOpen}
  title="New feature"
  refEl={triggerRef}
  numberOfSteps={4}
  currentStep={2}
  onPrimaryButtonClick={() => {
    // do something
  }}
  onDismiss={() => {
    // do something
  }}
>
  This is a new feature. You should try it out
</GuideCue>;

An example of how to use the multi-step tooltip can be found in (storybook - MultistepDemo)https://github.com/mongodb/leafygreen-ui/blob/main/packages/guide-cue/src/GuideCue.story.tsx

Usage

There are two variations of the tooltip -- stand-alone and multi-step. The multi-step tooltip shows the number of steps, has a dismiss and primary button, and displays a pulsing beacon while the stand-alone tooltip only shows the primary button and does not include the number of steps or the dismiss button.

The variant that is shown depends on the number of steps. If numberOfSteps > 1 the multi-step tooltip is shown else the stand-alone tooltip is shown.

Properties