How to implement walk through or tour in ionic 3?

Question

I want to implement App tour in my ionic3 app as shown in image below

Is there any trusted solution or plugins for App tour or walk-through for ionic 3 and angular 4 ?

Answer 1

You can add a tour / walktrought /onboarding to you app by using intro.js:

1) install intro.js using npm. In you app directory launch

npm install intro.js --save

2) Import library in you app index.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/introjs.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/intro.min.js"></script>

3) Create a page and put into page.ts header

import introJs from 'intro.js/intro.js';

4) Put into homepage.ts code

ngAfterViewInit(): void {
  this.intro();
}

intro() {
  let intro = introJs.introJs();
  intro.setOptions({
  steps: [
    {
      intro: "Hello world!"
    },
    {
      element: '#step1',
      intro: "This is a tooltip.",
      position: 'bottom'

    },
    {
      element: '#step2',
      intro: "Ok, wasn't that fun?",
      position: 'bottom'
    }
  ]
  });
  intro.start();
}

3) Put in your page.html

<ion-content padding>
    <p id="step1">First step</p>
    <p id="step2">Second Step  </p>
</ion-content>

That's it!

Actually this is a simplified/tested version of this answer

A code sample

Intro.js website for documentation

EDIT: This procedure works, but has an issue with chrome 66. Please refer here and find the solution by jwbeech. Anyway I quote the solution by jwbeech:

The issue is a css property attached to the root ion-app element: contain: strict;. This appears to be a performance tweak for the ionic app which clearly has z-index issues in chrome.

contain: strict; is actually shorthand for contain: layout paint size style, changing it to: contain: layout size style; is enough to mitigate the problem. Some background I found: https://termvader.github.io/css-contain/

The following SCSS should allow for this change only when the introjs tips are applied:

ion-app, ion-nav, ion-tab, ion-tabs, .app-root, .ion-page{
    &.introjs-fixParent{
        contain: layout size style;
    }
}

There may be other layouts that require this change not covered by the above style but that is the crux of the issue.