We use Intro.Js at Veritonic for some of our in-app tutorials.
In one of our pages, we came across a scenario where IntroJS was rendering tutorial steps for elements hidden by display: none in CSS.
To accomplish this, we combine a trick for finding out if the target element is hidden, and a selector to find all the intros in a page.
Example
Without further ado - this is how we do it. When someone clicks “start tutorial”, this code runs, which finds the active elements and triggers the tutorial.
// get all intro elements, and filter out the ones that are not visible
const steps = Array.prototype.slice.call(document.querySelectorAll('*[data-intro]'))
// https://stackoverflow.com/questions/53047318/performant-way-to-find-out-if-an-element-or-any-of-its-ancestor-elements-has-dis
// only visible elements:
.filter(el => !!el.offsetParent)
// transform into introJS steps
// https://introjs.com/docs/tour/examples/json-config
.map(el => ({
element: el,
intro: el.getAttribute('data-intro'),
title: el.getAttribute('data-title'),
}))
// run introJS with our step list
introJS().setOptions({ steps }).start();