v135 · css

Tour Overlay

A 3-step product tour that spotlights one section of the UI at a time. interactivity: inert makes the non-highlighted sections completely non-interactive — no click, no keyboard, no focus — without any JavaScript event listeners or pointer-events: none gymnastics. CSS handles the dimming and blocking; JS only advances the step.

Feature detection: checking…
CSS interactivity state: topbar: — sidebar: — content: —
Tour step
Body
Step 1 / 3
user@example.com
📊 Overview
📈 Analytics
📋 Reports
🔔 Alerts
⚙️ Settings

Quick Summary

Total page views this week: 18,423. Click the button below to see the full report.

Recent Activity

3 new alerts since your last login. Two require immediate attention.

/*
  CSS drives the inertness — JS only sets data-tour-step.
  No JS event interception, no pointer-events hacks needed.
*/

/* Step 1: touring the topbar — sidebar and content become inert */
.app-frame[data-tour-step="1"] .app-sidebar,
.app-frame[data-tour-step="1"] .app-content {
  interactivity: inert;
  opacity: 0.35;
}

/* Step 2: touring the sidebar — topbar and content become inert */
.app-frame[data-tour-step="2"] .app-topbar,
.app-frame[data-tour-step="2"] .app-content {
  interactivity: inert;
  opacity: 0.35;
}

/* Step 3: touring the content — topbar and sidebar become inert */
.app-frame[data-tour-step="3"] .app-topbar,
.app-frame[data-tour-step="3"] .app-sidebar {
  interactivity: inert;
  opacity: 0.35;
}

/*
  interactivity: inert prevents:
  - Mouse clicks and hover events
  - Keyboard focus and Tab traversal
  - Touch events
  — all without any JS event.stopPropagation() or pointer-events: none
*/

see also