Popover

The popover is the main UI element of AidEyeKit. It's the element that highlights the target element, and shows the step content.

Popover Configuration

You can configure the popover globally, or per step. Given below are some of the available configuration options.

Attribute	Type	Description
title	`string`	Title shown in the popover. You can use HTML.
description	`string`	Descriptions shown in the popover. You can use HTML.
side	`"top" \| "right" \| "bottom" \| "left"`	The position of the popover relative to the target element.
align	`"start" \| "center" \| "end"`	The alignment of the popover relative to the target element.
showButtons	`("next" \| "previous" \| "close")[]`	Array of buttons to show in the popover. When highlighting a single element, there are no buttons by default.
disableButtons	`("next" \| "previous" \| "close")[]`	An array of buttons to disable.
nextBtnText	`string`	Text to show in the 'next' button.
prevBtnText	`string`	Text to show in the 'previous' button.
doneBtnText	`string`	Text to show in the 'done' button, on the last step of a tour.
showProgress	`boolean`	Whether to show the progress text in popover.
progressText	`string`	Template for the progress text. Use `{{current}}` and `{{total}}` as placeholders. Eg: "`{{current}}` of `{{total}}`"
popoverClass	`string`	Custom class to add to the popover element. This can be used to style the popover.

Popover Render Hook

Called after the popover is rendered.

This hook has the following parameters:

popover - An object with references to the popover DOM elements such as buttons, title, descriptions, body, container, etc.
options.config - The current configuration options.
options.state - The current state of aidEye.

onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => void;

AidEye Button Hook

Hooks to run on button clicks.

Each hook receives the following parameters:

element - The current DOM element of the step.
step - The step object configured for the step.
options.config - The current configuration options.
options.state - The current state of the aidEye.

onNextClick: (element?: Element, step: AidEyeStep, options: { config: Config; state: State }) => void
onPrevClick: (element?: Element, step: AidEyeStep, options: { config: Config; state: State }) => void
onCloseClick: (element?: Element, step: AidEyeStep, options: { config: Config; state: State }) => void

Important Note

By overriding onNextClick and onPrevClick hooks, you control the navigation of the aidEye.

This means that the user won't be able to navigate using the buttons and you will have to either call myAidEye.moveNext() or myAidEye.movePrevious() to navigate to the next/previous step.

onNextClick and onPrevClick hooks can be configured at the step level as well. When configured at aidEye level, you control the navigation for all the steps. When configured at the step level, you control the navigation for that particular step only.

Ideas you can implement

You can use this to implement custom logic for navigating between steps.

This is also useful when you are dealing with dynamic content and want to highlight the next or previous element based on some logic.