Multiple page tour using bootstrap tour

[alex-p-crest]

I am using angular-bootstrap-tour for the tour feature in my app. It is working fine for the same page but the ordering is not proper when it comes to different pages.

I am using angularjs state provider
first page code

  <li ui-sref-active="current" style="width: 33.33%;padding-top:6px;border-top:0" id="step1" class="ibox-title" on-Next="checkTour(tour)" tour-step order="1" title="1 Company Profile" backdrop="true" on-Hidden="clearbody(tour)"  on-Shown="preparebody(tour)"  content="This is a 1 step on our tour. You can easy set a Company Profile." placement="top"><a ui-sref=".company_profile" class="btn-default ellipsisClass"><span>1</span> Company Profile</a></li>

Second Page Code :

     <button class="btn btn-info" type="button" ng-click="openImportUsers();" class="ibox-content text-center" id="step2" order="2" tour-step="step2" title="Import Users" on-Next="checkTour(tour)" backdrop="true" on-Hidden="clearbody(tour)" on-Shown="preparebody(tour)" content="You can import multiple users." placement="left">Import Users</button>

When i do next from first page li tag then it is jumping to the same page other order instead of Second page order 2. Please provide some help in this.

[benmarch]

You will have to use the next-path and next-step attributes to specify the path and ID of the next step. Note that this does not integrate with UI Router. I strongly recommend using Angular UI Tour instead of this library since it has more features, and I will integrate better with your use case.

[alex-p-crest]

I tried and installed the Angular UI Tour also but there are some issues in configuring it.

In documentation, Tour Configuration

"Tours can be configured either programatically in a config block, or declaratively as part of the uiTour directive declaration.

To configure in a config block, use TourConfigProvider.set(optionName, optionValue);

To configure on a tour declaration, use ui-tour-="optionValue"

What is the optionName and optionValue.

Also please explain what is : "To configure on a tour step declaration, use tour-step-="optionValue".

FYI: i am using ui.router for my APP

[alex-p-crest]

I am using

and when i reload my app it gives me below error.

angular.js:13708 TypeError: e is not a constructor
    at Object.o (http://dayjibefront.localhost.com/bower_components/angular-ui-tour/dist/angular-ui-tour.js:7:26008)
    at Object.invoke (http://dayjibefront.localhost.com/bower_components/angular/angular.min.js:41:376)
    at Object.$get (http://dayjibefront.localhost.com/bower_components/angular/angular.min.js:39:45)
    at Object.invoke (http://dayjibefront.localhost.com/bower_components/angular/angular.min.js:41:376)
    at http://dayjibefront.localhost.com/bower_components/angular/angular.min.js:43:175
    at d (http://dayjibefront.localhost.com/bower_components/angular/angular.min.js:40:344)
    at e (http://dayjibefront.localhost.com/bower_components/angular/angular.min.js:41:78)
    at Object.invoke (http://dayjibefront.localhost.com/bower_components/angular/angular.min.js:41:163)
    at R.instance (http://dayjibefront.localhost.com/bower_components/angular/angular.min.js:89:399)
    at m (http://dayjibefront.localhost.com/bower_components/angular/angular.min.js:65:65) <div ui-view="">

i have added ui-tour in my page div

[alex-p-crest]

It was all my mistake.

First i got the optionValue thing (Sorry but i have not read the document properly)
Second the constructor error which is due to hone.js missing

Thanks.

[alex-p-crest]

I have some other issues.

1. When i apply tour-step-backdrop = 'true' is doesn't cover full screen.
2. When i start the tour the popup comes but empty(not positioned correctly) and when i scroll a bit then it adjust and look properly.

see the screen shot

Please help.

[benmarch]

Hey @alex-p-crest, is this Angular UI Tour, or Angular Bootstrap Tour? If it is Angular UI Tour, can you move your comments over to that repo and close this issue?

Can you also paste in the tour step element markup so I can see all the options you specified, as well as the browser you are using and the version? I have noticed similar issues intermittently on my test environment, so you might be able to help me narrow down the cause.

Thanks,
Ben

[alex-p-crest]

I am using Angular UI Tour. Ok i am moving this thread to other repo.