angular-ui/ui-tour

A native tour-type directive that will lace easily-controllable tooltips throughout your app

ui-tour directive

A Tour-Type plugin written natively in angular. Lets you take your visitors through a series of easily controllable tooltips laced throughout your app.

ui-tour's Issues

Go to key not working

When you set the model to a string key, it should locate what step that is and go directly to it. This does not appear to currently be working.

Create new alternative syntax

In tourjs they put attributes on the DOM elements themselves. Although I believe this is something I considered, it reduces the capabilities of the content (such as the ability to put HTML into the tooltips) however it makes it easier to find the highlighted DOM elements.

Overlay is not working with the new version of bootstrap

Remove jQuery Dependency

Hello. I made a plunkr of the demo.html to test out whether I can use this module. I can't seem to get it to run without including jquery. Is this intentional? It was my understanding that all angular-ui components worked natively.

How to make ui-tour to work with angular-translate?

How to make ui-tour to work with angular-translate?
For example, this piece of code does not seem to work: <a ng-click="$ctrl.openCreateSiteModal()" tour-step="home-step90" tour-step-belongs-to="teacherTour" tour-step-title="Collection of sites" tour-step-content="<p>{{'HOME-STEP90-1' | translate}}</p>" tour-step-order = "90" tour-step-placement="right" tour-step-prev-step="home-step80">

Go to specific step # works inconsistently

Go to 3 in the demo doesn't always work depending on if you clicked next already or not.

Tooltip and custom styling

Currently there's just a simple rudimentary stylesheet. Things like arrows and positioning of tooltips haven't been tackled yet, and I would prefer to remove as much of this from the plugin as possible (instead letting people customize the css and classes of each tooltip step manually).

This must still be easily integratable with tools like bootstrap.

New Syntax + Drop jquery

Instead, should use something like <a ui-tour="intro">...</a> which would then be used in conjunction with

<ui-tour-steps>
  <ui-tour-step name="intro">
    <!-- popup html goes here -->
  </ui-tour-step>
  <ui-tour-step name="features">...</ui-tour-step>
  <ui-tour-step name="navigation">...</ui-tour-step>
<ui-tour-steps>

This way we'd simply cache all the elements with ui-tour on them and then look them up by name (instead of using jQuery DOM selectors and target="h1:eq(2)" or other convoluted CSS selectors. In response to #7

Change highlighting approach

Right now I have 1 div with a MASSIVE translucent border-radius (as the overlay).

A much better approach would be to use 1 simple element as a full-page translucent overlay, then create a second element that serves as the highlight box (pretty much just a transparent box with box-shadow, lower z-index than target). The target element is then set to pos:rel (if necessary) and it's z-index is boosted to a higher-than-overlay value.