Applying CSS

You can customize the look and feel of aideye by adding custom class to popover or applying CSS to different classes used by AidEyeKit.

Global Level

You can set popoverClass globally in the aideye configuration.

const myAidEye = aideye({
  popoverClass: 'aideye-theme' 
});

Step Level

You can also set popoverClass at the step level to apply custom class to the popover and then use CSS to apply styles.

const myAidEye = aideye({
  steps: [ 
    {
      element: '#element',
      popover: {
        title: 'Title',
        description: 'Description',
        popoverClass:'aideye-theme',
      }
    }
  ]
});

Popover Document Object Model (DOM)

Alternatively, you can also use the onPopoverRender hook to modify the popover DOM before it is displayed. The hook is called with the popover DOM as the first argument.

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;

Attribute	Type
wrapper	`HTMLElement`
arrow	`HTMLElement`
title	`HTMLElement`
description	`HTMLElement`
footer	`HTMLElement`
progress	`HTMLElement`
previousButton	`HTMLElement`
nextButton	`HTMLElement`
closeButton	`HTMLElement`
footerButtons	`HTMLElement`