Driver.js Tour Library

{
  element: '#btnColumns',
  popover: {
    title: 'Switch Views',
    description: 'Click here to show or hide columns. Focus on pre-mitigation, post-mitigation, or specific FMEA aspects.',
    position: 'bottom',
    showButtons: ['next', 'previous', 'close'],
    progressText: 'Step {{current}} of {{total}}'
  }
}

const risksheetTour = {
  steps: [
    {
      element: '#nxtr-topPanel .rs-green-colored',
      popover: {
        title: 'Welcome to Risksheet',
        description: 'Risksheet is a spreadsheet-like editor for FMEA with 1:1 LiveDoc sync. Changes here automatically update the Polarion document.',
        position: 'bottom',
        showButtons: ['next', 'close']
      }
    },
    {
      element: '#theGrid',
      popover: {
        title: 'Risk Analysis Grid',
        description: 'The main FMEA grid displays failure modes, effects, causes, and risk assessments in an Excel-like spreadsheet. Click cells to edit directly.',
        position: 'bottom'
      }
    },
    {
      element: '#btnColumns',
      popover: {
        title: 'Switch Views',
        description: 'Click to show or hide columns focusing on pre-mitigation, post-mitigation, or specific FMEA aspects.',
        position: 'bottom'
      }
    }
  ],
  stagePadding: 8,
  stageRadius: 4,
  smoothScroll: true
};

const tour = new Driver(risksheetTour);
tour.drive();

{
  element: '#theGrid',
  popover: { /* ... */ },
  onHighlighted: (step) => {
    console.log('Grid is now highlighted');
    document.getElementById('theGrid').classList.add('tour-active');
  },
  onDeselected: (step) => {
    document.getElementById('theGrid').classList.remove('tour-active');
  }
}