The NUX module exposes components, and wp.data methods useful for onboarding a new user to the WordPress admin interface. Specifically, it exposes tips and guides.

A tip is a component that points to an element in the UI and contains text that explains the element's functionality. The user can dismiss a tip, in which case it never shows again. The user can also disable tips entirely. Information about tips is persisted between sessions using localStorage.

A guide allows a series of of tips to be presented to the user one by one. When a user dismisses a tip that is in a guide, the next tip in the guide is shown.

DotTip is a React component that renders a single tip on the screen. The tip will point to the React element that DotTip is nested within. Each tip is uniquely identified by a string passed to id.

See the component's README for more information.

<button onClick={ ... }>
	Add to Cart
	<DotTip id="acme/add-to-cart">
		Click here to add the product to your shopping cart.
	</DotTip>
</button>
}

You can programmatically determine if a tip is visible using the isTipVisible select method.

const isVisible = select( 'core/nux' ).isTipVisible( 'acme/add-to-cart' );
console.log( isVisible ); // true or false

dismissTip is a dispatch method that allows you to programmatically dismiss a tip.

<button
	onClick={ () => {
		dispatch( 'core/nux' ).dismissTip( 'acme/add-to-cart' );
	}
>
	Dismiss tip
</button>

disableTips is a dispatch method that allows you to programmatically disable all tips.

<button
	onClick={ () => {
		dispatch( 'core/nux' ).disableTips();
	}
>
	Disable tips
</button>

You can group a series of tips into a guide by calling the triggerGuide dispatch method. The given tips will then appear one by one.

A tip cannot be added to more than one guide.

dispatch( 'core/nux' ).triggerGuide( [ 'acme/product-info', 'acme/add-to-cart', 'acme/checkout' ] );

getAssociatedGuide is a select method that returns useful information about the state of the guide that a tip is associated with.

const guide = select( 'core/nux' ).getAssociatedGuide( 'acme/add-to-cart' );
console.log( 'Tips in this guide:', guide.tipIds );
console.log( 'Currently showing:', guide.currentTipId );
console.log( 'Next to show:', guide.nextTipId );