Can't manage to create my first tour

[Lysoun]

Hello

I've been trying for quite some time to use your library and I can't manage to create my first tour. I have used some examples given in the documentation but I can't make them work.

I am using the exact versions of the following:

• Browser: [Opera] Version: 62.0.3331.119

• AngularJS: 1.6.4

• Angular Bootstrap: I don't have it; it is not a dependency, is it?

• Angular UI Tour: 0.9.2

I have installed this library via: Bower

I have observed the following behavior:

Even if I've imported ui Tour in my app.js, I don't seem to create any tours despite my html directives. The contents of my steps do appear but there are no titles, no buttons, nothing but my contents and there is no css. Here is a screen of what I can see:

This is how I expected it to behave:

My steps should be displayed as there are in the demo.

Here is my tour config, and all related step configs:

var tourConfig = {};

<div ui-tour>
<div id="mainMenu"
     tour-step
     tour-step-title="Main Menu"
     tour-step-content="Navigate the site using this menu."
     tour-step-order="0"
     tour-step-placement="right">...</div>
...
<div id="settings" 
     tour-step 
     tour-step-title="Settings" 
     tour-step-content="Click here to change your settings." 
     tour-step-order="1">...</div>
<div id="finalTourMessage" 
     tour-step 
     tour-step-title="Welcome!" 
     tour-step-content="Enjoy using the app!" 
     tour-step-order="1000" 
     tour-step-orphan="true" 
     tour-step-backdrop="true">...</div>
</div>

Additional notes/code:
I have had problems when installing angular-ui-tour: bower would install angular-hotkeys and not cfp-angular-hotkeys and the line given in the README to import hotkeys wasn't correct. I don't think this is related though.

Thank you for your help!

[benmarch]

Hey @Lysoun,

There may be a couple things going on here. When you install with bower, you are responsible for all other dependencies (script and link tags), so be sure all of those have been included. This includes the Bootstrap 3 CSS stylesheet. Are there any errors in the console? I wonder if there is any additional information.

Thanks,

Ben

[Lysoun]

Hello @benmarch,

Unfortunately I have no errors in the console :(
Since you mentionned the Bootstrap 3 CSS stylesheet I have tried:

• installing angular-bootstrap using bower install angular-bootstrap and importing its module in my application
• installing bootstrap using bower install bootstrap and importing bootstrap.min.css in my main.scss

I did not see any difference. There seems to be no css applying to my tour-step divs, I'm linking you a screenshot of my app with the inspecting css console.

I've looked for a css file that would come with angular-ui-tour but could not find any in my bower_components nor node_modules; this may be the problem. I've searched for starts of containers like tour-step { or tour-step{ but I found no results.

Please tell me if you need more information, I'd really like to make this work.
Thank you,
Lysoun

[benmarch]

Hi @Lysoun,

I am very sorry for the delay. All the angular-ui-tour styles are included in the JavaScript, no need to import anything else, but you will need the Bootstrap 3 styles or custom popover styles.

How are you starting the tour? Can you show me some controller code?