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.

note

Examples on this page use localStorage to persist state.

Wrap target element

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.

Anchor to DOM element

Instead of wrapping the target element, use the

anchor prop to specify a DOM node. Accepted values include an HTML element reference, a function returning an HTML element, or a CSS selector string such as anchor="#anchorTarget".

Guided tour

Uers proceed through tour steps without needing to complete actions on the underlying page. In this scenario, consider showing both Close tour and Next buttons.

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.

useEuiTour hook

The useEuiTour hook provides 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.

EuiTour render prop component

The EuiTour render prop component provides minimal state management. An alternative to the useEuiTour hook, EuiTour can be used for React class components and use cases with a single wrapping component.

Tour demo

A complete tour set in a more realistic application UI. Unlike other examples on this page, the demo does not use localStorage to persist state.

Props

EuiTourStep

Extends HTMLAttributes


Prop	Description and type	Default value
Prop content#	Description and type Contents of the tour step popover Type: `ReactNode`	Default value Required
Prop onFinish#	Description and type Function to call for 'Skip tour' and 'End tour' actions Type: `NoArgCallback<void>`	Default value Required
Prop stepsTotal#	Description and type The total number of steps in the tour Type: `number`	Default value Required
Prop title#	Description and type Larger title text specific to this step. The title gets wrapped in the appropriate heading level. Type: `ReactNode`	Default value Required
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Provide a name to the popover panel Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop zIndex#	Description and type By default, popover content inherits the z-index of the anchor component; pass `zIndex` to override Type: `number`	Default value
Prop children#	Description and type Element to which the tour step popover attaches when open Type: `ReactNode & ReactElement<any, string \| JSXElementConstructor<any>>`	Default value
Prop aria-labelledby#	Description and type Alternative option to `aria-label` that takes an `id`. Usually takes the `id` of the popover title Identifies the element (or elements) that labels the current element. @see aria-describedby. Type: `string`	Default value
Prop container#	Description and type Restrict the popover's position within this element Type: `HTMLElement`	Default value
Prop display#	Description and type CSS display type for both the popover and anchor Type: `Display`	Default value
Prop offset#	Description and type Distance away from the anchor that the popover will render Type: `number`	Default value
Prop panelRef#	Description and type Type: `RefCallback<HTMLElement>`	Default value
Prop ownFocus#	Description and type Traps tab focus within the popover contents Type: `boolean`	Default value
Prop focusTrapProps#	Description and type Object of props passed to EuiFocusTrap Type: `Partial<EuiFocusTrapProps>`	Default value
Prop isOpen#	Description and type Visibility state of the popover Type: `boolean`	Default value
Prop anchorPosition#	Description and type Alignment of the popover and arrow relative to the button Type: `"upCenter" \| "upLeft" \| "upRight" \| "downCenter" \| "downLeft" \| "downRight" \| "leftCenter" \| "leftUp" \| "leftDown" \| "rightCenter" \| "rightUp" \| "rightDown"`	Default value `leftUp`
Prop attachToAnchor#	Description and type Style and position alteration for arrow-less attachment. Intended for use with inputs as anchors, e.g. EuiInputPopover Type: `boolean`	Default value
Prop hasArrow#	Description and type Show arrow indicating to originating button Type: `boolean`	Default value
Prop initialFocus#	Description and type Specifies what element should initially have focus; Can be a DOM node, or a selector string (which will be passed to document.querySelector() to find the DOM node), or a function that returns a DOM node. If not passed, initial focus defaults to the popover panel. Type: `ElementTarget`	Default value
Prop insert#	Description and type Passed directly to EuiPortal for DOM positioning. Both properties are required if prop is specified Type: `{ sibling: HTMLElement; position: "before" \| "after"; }`	Default value
Prop panelClassName#	Description and type Custom class added to the EuiPanel containing the popover contents Type: `string`	Default value
Prop panelPaddingSize#	Description and type EuiPanel padding on all sides Type: `"xs" \| "s" \| "m" \| "l" \| "xl" \| "none"`	Default value
Prop panelStyle#	Description and type Standard DOM `style` attribute. Passed to the EuiPanel Type: `CSSProperties`	Default value
Prop panelProps#	Description and type Object of props passed to EuiPanel. See #EuiPopoverPanelProps Type: `Omit<_EuiPanelDivlike, "style" \| "color" \| "hasBorder" \| "hasShadow">`	Default value
Prop popoverScreenReaderText#	Description and type Optional screen reader instructions to announce upon popover open, in addition to EUI's default popover instructions for Escape on close. Useful for popovers that may have additional keyboard capabilities such as arrow navigation. Type: `ReactNode`	Default value
Prop popoverRef#	Description and type Type: `Ref<HTMLDivElement>`	Default value
Prop repositionOnScroll#	Description and type When `true`, the popover's position is re-calculated when the user scrolls, this supports having fixed-position popover anchors. When nesting an `EuiPopover` in a scrollable container, `repositionOnScroll` should be `true` Type: `boolean`	Default value
Prop repositionToCrossAxis#	Description and type By default, popovers will attempt to position themselves along the initial axis specified. If there is not enough room either vertically or horizontally however, the popover will attempt to reposition itself along the secondary cross axis if there is room there instead. If you do not not want this repositioning to occur (and it is acceptable for the popover to appear offscreen), set this to false to disable this behavior. Type: `boolean`	Default value `true`
Prop buffer#	Description and type Minimum distance between the popover and the bounding container; Pass an array of 4 values to adjust each side differently: `[top, right, bottom, left]` Type: `number \| [number, number, number, number]`	Default value `16`
Prop arrowChildren#	Description and type Element to pass as the child element of the arrow; Use case is typically limited to an accompanying `EuiBeacon` Type: `ReactNode`	Default value
Prop onPositionChange#	Description and type Function callback for when the popover positon changes Type: `(position: EuiPopoverPosition) => void`	Default value
Prop closePopover#	Description and type Callback to handle hiding of the popover Type: `NoArgCallback<void>`	Default value `() => {}`
Prop anchor#	Description and type Selector or reference to the element to which the tour step popover attaches when open Type: `ElementTarget`	Default value
Prop isStepOpen#	Description and type Step will display if set to `true` Type: `boolean`	Default value `false`
Prop minWidth#	Description and type Change the default min width of the popover panel Type: `MinWidth<string \| number>`	Default value `300`
Prop maxWidth#	Description and type Change the default max width of the popover panel Type: `MaxWidth<string \| number>`	Default value `600`
Prop step#	Description and type The number of the step within the parent tour. 1-based indexing. Type: `number`	Default value `1`
Prop subtitle#	Description and type Smaller title text that appears atop each step in the tour. The subtitle gets wrapped in the appropriate heading level. Type: `ReactNode`	Default value
Prop decoration#	Description and type Extra visual indication of step location Type: `"none" \| "beacon"`	Default value `beacon`
Prop footerAction#	Description and type Accepts any `ReactNode` to replace the 'Skip tour' link in the footer. Ideally, pass one button or an array of up to 2 buttons. Type: `ReactNode \| ReactNode[]`	Default value

EuiTourStepIndicator