UserGuideTooltip

Guide Tooltips are used for:

Product tours
Spotlight key features
New feature announcement
Label icons or buttons
Info tooltips providing explanation for UI elements

Best practices:

Copy should be max 140 characters (2 lines). If your message needs to be longer, break it up across multiple tooltips, or use in-app.
Focus on benefits, not functionality.

Design guides:

Tooltips can contain a header and body text, or just body text.
Use consistent headers for new feature announcement (“New!”; "Introducing:").
Exits — Let users "x" out or dismiss the tooltip with a confirmation CTA (“Got it”).
Single tooltips can get away with not having any exit and close when the user clicks elsewhere on the screen.
Progress bars — use for multi-step product tours.

```js const GuideStep = ({ title, text, step, total, onNext }) => ( <>

{title}

{text}

Step {step} of {total}

); const GuideStep1 = ({ onNext }) => ( ); const GuideStep2 = ({ onNext }) => ( ); const GuideStep3 = ({ onNext }) => ( ); class UserGuideTooltipExample extends React.PureComponent { constructor(props) { super(props); this.step1Ref = React.createRef(); this.step2Ref = React.createRef(); this.step3Ref = React.createRef(); this.state = { isVisible: false, step: 0 }; this.steps = [this.step1Ref, this.step2Ref, this.step3Ref]; this.handleTriggerClick = this.handleTriggerClick.bind(this); this.handleNextStep = this.handleNextStep.bind(this); } handleTriggerClick() { this.setState({ isVisible: true, step: 0 }); } handleNextStep() { if (this.state.step === this.steps.length - 1) { this.setState({ isVisible: false }); } else { this.setState(prevState => ({ step: prevState.step + 1 })); } } render() { const { isVisible, step } = this.state; const element = this.steps[step].current; return (

{element && ( {step === 0 && } {step === 1 && } {step === 2 && } )}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

); } } ; ```