Show tour for first user

I am trying to make a tour for the first user of my site. It works fine on localhost, but when I upload it to my dev server it doesn't work properly, i.e. the tooltips are not in the specified location. See the following two screenshots: Localhost pic

Development server

I think the problem is that the component is not loaded so far, I think the tooltip is being rendered in the middle of the page.

The repository I'm using is here

Code - Controller

$scope.IntroOptions = {
        steps:[
        {
            element: '#step1',
            intro: "<b>First Step First: </b>Click here to define structure of your test scripts!!<br/>You can modify this later on any time",
            position: 'left'
        },
        {
            element: '#step2',
            intro: "Click here to select a folder/test script spreadsheet from google drive.",
            position: 'bottom'
        }] 
,
        showStepNumbers: false,
        exitOnOverlayClick: false,
        exitOnEsc: false,
        nextLabel: '<strong>NEXT!</strong>',
        prevLabel: '<span style="color:green">Previous</span>',
        skipLabel: 'Exit',
        doneLabel: 'Thanks!'
    };
    $scope.ShouldAutoStart = false;

    $timeout(function(){
      $scope.CallMe();
    }, 0);

HTML code -

<div ng-controller="tourController" class="container-narrow">
    <div ng-intro-options="IntroOptions" ng-intro-method="CallMe"
             ng-intro-oncomplete="CompletedEvent" ng-intro-onexit="ExitEvent"
             ng-intro-onchange="ChangeEvent" ng-intro-onbeforechange="BeforeChangeEvent"
             ng-intro-onafterchange="AfterChangeEvent"
             ng-intro-autostart="ShouldAutoStart">
    </div>
  </div>

** I tried using angular.element (document) .ready () but did not work.

Things are working now with a timeout of 1000 milliseconds, but I think there should be a better way to do this

+4

Source: https://habr.com/ru/post/1622571/


All Articles