Page Comparison

...

• target: Defines the CSS selector for the element to be highlighted by the tooltip.

• title: The heading for each step, providing a brief overview of what the step is about.

• content: The description displayed in the tooltip, guiding the user on what action to take or information to understand.

• spotlightClicks: Allows the user to click on the highlighted element within the spotlight, making it interactive. (default : false)

• placement: Positions the tooltip relative to the targeted element. Possible values include top, bottom, left and right. (default : auto)

• disableOverlay:Disables the overlay background that typically dims the area outside the tooltip. When set to true, this property focuses the user's attention solely on the highlighted element without any visual distractions from the surrounding area. (default : false)

• hideBackButton: Hides the Next button for the current step, preventing the user from manually advancing to the next step. (default : false)

• hideNextButton: Hides the Back button for the current step, preventing the user from navigating to the previous step. (default : false)

• data.autoNextOn: Specifies the CSS selector of the element that, when it appears on the screen, triggers the automatic transition to the next step in the tutorial.

...

Below is the configuration for the steps in the tooltip UI shown above:

{
    target: '[data-openmrs-role="Search Icon"]',
    title: 'Search Icon',
    content:
      'This is the search icon. Use it to find patients in the system quickly.',
    disableOverlay: true,
    placement: 'bottom',
    spotlightClicks: true,
    hideBackButton: true,
    hideNextButton: true,
    data: { 
      autoNextOn: '[data-openmrs-role="Register Button"]' 
    },
},

Auto transition steps

To automatically transition to the next step when an element appears on the screen, you can add the autoTransition property to the step configuration. This property should be an object with the following properties:

• autoNextOn: The selector of the element that should trigger the transition.

Example usage:

{
  target: 'selector',
  title: 'Title',
  data: {
    autoNextOn: 'next selector',
  }