Ionic4 and Intro.js display problems

Issue

After installing Intro.js to an Ionic4 app, the tooltips don't display correctly out of the box.

Running introJs().start(); starts the tooltip but display is wrong.

The tooltips should display on the correct element and that element must be shown over the overlay.

Solution

The trick here is to make introjs to add to your component root. By default intro.js adds divs to the body element, so tooltips doesn't display ok. To Start intro.js on home.page.ts you must specify with document.querySelector(yourcomponentselector)

import { Component } from '@angular/core';

import * as introJs from 'intro.js/intro.js';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor() {}

  showHelp(){
    introJs(document.querySelector("app-home")).setOptions({
      'nextLabel': 'Next step',
      'prevLabel': 'Previous step',
      'skipLabel': 'Don\'t bother me!',
      'doneLabel': 'Finish'
    }).start(); 
  }
}

Additionaly, some ionic components 'content' css property must be overriden.

ion-nav,
ion-tab,
ion-tabs,
ion-list {
    contain: none;
}

I've uploaded a example project at github: https://github.com/konum/ionic4-introjs/

Answered By - Guillermo Gefaell