Tour
The tour components provided by EUI allow for a flexible and customizable way to showcase items on a page in an ordered manner by augmenting existing elements on the page without altering functionality.
The examples on this page use localStorage to persist state to demonstrate starting a tour at different stages.
Step options
The EuiTourStep component is the base for building a feature tour or an individual popover for onboarding.
All content and actions including titles, headings, and buttons are customizable via props.
Using DOM selector as anchor location
Instead of wrapping the target element, use the anchor prop to specify a DOM node. Accepted values include
an HTML element, a function returning an HTML element, or a DOM query selector.
Standalone steps
Each EuiTourStep can be configured independently via props. In this case, each component is stateless and needs to be paired with some form of state management for navigation. The later examples showcase other ways to handle state management via useEuiTour and EuiTour.
Managed state with the useEuiTour custom hook
Use the useEuiTour hook for minimal state management using a predefined React reducer. Pass an array of steps consisting of accepted props, and an object of global configuration. The result is a full configuration object for each step, a set of reducer actions to perform state changes, and an up-to-date state object derived from the internal reducer.
Managed state via EuiTour render prop component
Use the EuiTour render prop component for minimal state management. This is an alternative to the useEuiTour hook for React class components, or use cases where a single wrapping component can be used.
Passive tour
Use the EuiTour to provide sequential help without the user performing any actions (e.g. filling out a form or copying a text). In this scenario, consider using two buttons, Close tour and Next.
Fullscreen demo
Unlike the other examples on this page, this example does not use localStorage to persist state.