Interactive Product Tour

<link rel="stylesheet" href="path/to/primary-button-cta/styles.css">
<link rel="stylesheet" href="path/to/interactive-product-tour/styles.css">

<!-- Target elements the tour will pin to -->
<header id="dashboard-header">My Dashboard</header>
<nav id="sidebar-nav" class="sidebar">Sidebar</nav>
<main id="main-content">Main content</main>

<!-- Trigger button -->
<button id="start-tour-btn">Start tour</button>

<!-- Tour overlay and tooltip are injected by the script below -->

<script>
(function () {
  var steps = [
    {
      target: '#dashboard-header',
      title: 'Welcome',
      content: 'This is your dashboard header.',
      position: 'bottom',
    },
    {
      target: '#sidebar-nav',
      title: 'Navigation',
      content: 'Use the sidebar to switch sections.',
      position: 'right',
    },
    {
      target: '#main-content',
      title: 'Content',
      content: 'Your main content appears here.',
      position: 'left',
    },
  ];

  var currentStep = 0;
  var overlay, tooltip;

  function getRect(selector) {
    var el = document.querySelector(selector);
    return el ? el.getBoundingClientRect() : null;
  }

  function buildTooltip(step, index) {
    var rect = getRect(step.target);
    var top = rect ? rect.bottom + 12 : window.innerHeight * 0.35;
    var left = rect ? rect.left : window.innerWidth / 2 - 160;

    overlay = document.createElement('div');
    overlay.className = 'ipt__overlay';
    overlay.setAttribute('aria-hidden', 'true');

    tooltip = document.createElement('div');
    tooltip.className = 'ipt__tooltip';
    tooltip.setAttribute('role', 'dialog');
    tooltip.setAttribute('aria-modal', 'true');
    tooltip.style.top = top + 'px';
    tooltip.style.left = left + 'px';
    tooltip.innerHTML =
      '<p class="ipt__progress">Step ' + (index + 1) + ' of ' + steps.length + '</p>' +
      '<h2 class="ipt__tooltip-title">' + step.title + '</h2>' +
      '<p class="ipt__tooltip-content">' + step.content + '</p>' +
      '<div class="ipt__actions">' +
        (index > 0 ? '<button class="pbc pbc--outlined pbc--rounded" id="ipt-back">Back</button>' : '') +
        '<button class="pbc pbc--solid pbc--rounded" id="ipt-next">' +
          (index === steps.length - 1 ? 'Done' : 'Next') +
        '</button>' +
        '<button class="ipt__skip" id="ipt-skip">Skip tour</button>' +
      '</div>';

    document.body.appendChild(overlay);
    document.body.appendChild(tooltip);

    document.getElementById('ipt-next').addEventListener('click', function () {
      cleanup();
      if (index < steps.length - 1) {
        currentStep = index + 1;
        buildTooltip(steps[currentStep], currentStep);
      }
    });

    var backBtn = document.getElementById('ipt-back');
    if (backBtn) {
      backBtn.addEventListener('click', function () {
        cleanup();
        currentStep = index - 1;
        buildTooltip(steps[currentStep], currentStep);
      });
    }

    document.getElementById('ipt-skip').addEventListener('click', cleanup);
  }

  function cleanup() {
    if (overlay) overlay.remove();
    if (tooltip) tooltip.remove();
  }

  document.getElementById('start-tour-btn').addEventListener('click', function () {
    currentStep = 0;
    buildTooltip(steps[0], 0);
  });

  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') cleanup();
  });
}());
</script>