Disable element interaction

When an element is highlighted, users can interact with the underlying element. For example, if a button is focused, users can still click the button.

To disable this behavior, use the disableInteraction option:

Live Editor

introJs().setOptions({
  disableInteraction: true,
  steps: [{
    title: 'Welcome',
    intro: 'Hello World! 👋'
  },
  {
    element: document.querySelector('.card-demo'),
    intro: 'You cannot select the text because "disableInteraction" is enabled'
  },
  {
    element: document.querySelector('.card-demo-link'),
    intro: 'This link is not clickable either'
  },
  {
    title: 'Farewell!',
    element: document.querySelector('.card__image'),
    intro: 'And this is our final step!'
  }]
}).start();

introJs().setOptions({
  disableInteraction: true,
  steps: [{
    title: 'Welcome',
    intro: 'Hello World! 👋'
  },
  {
    element: document.querySelector('.card-demo'),
    intro: 'You cannot select the text because "disableInteraction" is enabled'
  },
  {
    element: document.querySelector('.card-demo-link'),
    intro: 'This link is not clickable either'
  },
  {
    title: 'Farewell!',
    element: document.querySelector('.card__image'),
    intro: 'And this is our final step!'
  }]
}).start();

Result

Quaco Lighthouse

The Quaco Head Lighthouse is a well maintained lighthouse close to St. Martins. It is a short, beautiful walk to the lighthouse along the seashore.