CreativeMilk supports this item


This author's response time can be up to 5 business days.

160 comments found.

I use “highlight” and “highlightElements” in several steps and noticed the page go from dark to light and back to dark as I navigate between the steps. It’s a weird transition and would be much cleaner if it stayed dark while going to steps. Is this possible? If not, please update the code to recognize it. Thanks.

Yes this is wierd therefor we addd the option called ‘keepHighligted’ to one of our previous updates, this will keep the overlay visible.

Hint! If you don’t want highlight option to be enabled, because you want your website to be clickable during tour, but you still want effect of highlighting there is simple CSS workaround for that. Add shadow to .powertour-step class in CSS (eg. box-shadow: 0 45px 60px -30px rgba(0, 0, 0, 0.85), 0 0 0 1600px rgba(0, 0, 0, 0.3);). Side effect is that in animations like flip you will notice that shadow is also flipped. I just used other effects.

Edit: This works in screen mode only because steps elements are added to document body in this case. (There is also simple code modification to allow this effect in any case.)

Hello CreativeMilk,

why does my powertour-activestep uses the style of it’s hook? In my case the hook style does transform: rotate(90deg); so the powertour does it too. what could be the reason?

Can you send us thru our contact page a link to your demo/site?

How can I call “destroy” method when the tour is ended? I tried to use this way:

$.powerTour({ tours : [ { onEndTour : function(ui){ $.powerTour('destroy'); }, }]}); ...but it fails because of “Uncaught RangeError: Maximum call stack size exceeded”.

My goal is to remove all generated code from the page (because there is a lot of invalid html code generated by plugin which causes rendering problems).

We have mentioned in the documentation that you should wrap the inner of a table cell as tables don’t understand the position property. Elements like buttons that have an click event should be wrapped with a div and hook the step to this element.

When will be a update available?

We are uploading it today.

This is a professional level plugin. The options and the documentation are very clean and simple to use. The author provides tons of examples which is very convenient when you don’t want to read the whole doc though. Good job :)

Thank you :-)

Hi, Thank you for the great script! 5 stars One question I couldn’t find an answer: How can I have several triggers on one page for the same PowerTour triggering different steps? I tried many options including using .TriggerClass instead of #TriggerID, tried passing attributes like this data-powertour-startwith=”2” data-powertour-trigger=”2, nothing works.

<a href="#" class="TriggerClass" data-powertour-startwith="2" data-powertour-trigger="2">Start</a>
I have a form with ‘Help’ next to each field. It would be very nice to use PowerTour instead of popups. When i use url ”?startwith=2” it works but you have such an advanced API, I believe there should be an option to use several triggers for same tour. Thank you

Hello, thank you.

Well this should work but if you are using just 1 tour this is not going to work, because data-powertour-trigger=”2” is trying to call the second tour, so change this to 1.

Using multiple trigger isn’t mentioned in the docs but it is going to be in the next update(inc a example)

Thank you, I ended up using Method in powertour-example.js added

$.powerTour('run', [1, 2]);
Thanks again! Keep up with good work.

Does this Script work on Mobile devices , is it responsive ?

Yes and no, the plugin it self is NOT responsive but responsive views can be set with CSS . All steps have unique id’s therefor you can set a responsive view with CSS . We have included an responsive setup example in the pack. More questions please let us know.

Hello I have sent you a support request via the email contact form. Could you please review and respond. Thanks

We have send you an email back :-)

Hmm.. odd, I havent received it. What is your support email – I will send a message there directly

We have resend the email please check your spam folder if you dont see it.

when i add a step and hook to an element, the step has the css of the element..also you cannot close the step/tour when you click outside the step

do you have a fix?

i use a table and the step is hooked on a td (this td has layout options) the step is messed up and cannot be closed by clicking outside

Well with out an example I cant really help you with the table issue ;-) (see the tables example on how to use the tour with tables)

No you can’t add steps at a later point as the plugin builds the tour once it’s called. This sometimes can be fixed by using hidden elements in combination with AJAX and the position API.

But this feature is planned for the 4th version of the plugin.

ok then i have to wait for the 4th version..when will it be released?

We dont have a release date yet, so I cant say when it’s gona be released, I do hope soon.

when for WP ??

Really nice plugin. Are you still planning on updating it in the near future?

As we are preparing a small update we will take a look at this issue :-)

Thanks. Any idea when this will be?

We have submitted the new update but not sure when it will be live, I hope soon. Ps, we could not reproduce the issue in IE11 so we could not find a solution for that.

let us know once wordpress version is out


maex78 Purchased

Hi is there a function to save last “state” of returning user with cookies ?

If you mean that when a user stops at step number 3 and comes back to open the tour it starts at step number 3 then yes this is possible. Save the users last step index(id/number) and use this when a user returns in the startWith option(can be used/called in several ways, see docs and examples for more).

This looks complicated but it’s pretty simple actually.

Would this work on an iOS or Android app?

Yes it should work.If not please contact us.

Any chance I can get you guys to install it?

Sorry but we have no knowledge of apps so we cant help you with this request.


penaf Purchased

While the tour step is open it isn’t possible to click any other link on the site that the plugin will understand that has the user wishing to close the tour.

How can I change this behaviour?

Click on any page link should close the tour and send the user on it’s way to the destination….

Correct me if i am wrong but you want to use extra buttons/links that can close the tour…if so you can use the attribute data-powertour-action=”stop”’ which will cancel the tour


penaf Purchased

Nopes. I want to disable all website links while a tour step is opened.

Okay , well this this is possible

$(‘a:not([data-powertour-action])’).click(function(e) { e.preventDefault(); });

You should put this line of code inside the onStarTour callback function.



penaf Purchased

Also … for a different tour on another section of the site. How can I avoid having the tour closing when the user clicks outside the step baloon ?

You can use ‘easyCancel’ for this(change the value to false)


penaf Purchased

That did the trick! Thanks


penaf Purchased

By the way … The plugin is great and performs as expected but I have somethings about it that I think would be worth it for you to check out and try to improve it:

- For tours that spread across different pages, I don’t think it’s semantic or intuitive to say that the “Next button” triggers a data-powertour-action=”stop” as the tour doesn’t really stops … it just continues on a different page.

- The window.location.href on onEndTour is prone to bad redirections on multi-pages tours where you also have the .htaccess modified so that you provide that specific section f the tour with an unique URL lets say triggers the first part and the tour continues on and so on.. I had to so somethink like onEndTour: function (t) { [...] if ( "pw-1-3" || t.currentStep[0].id “pw-1-7” || == “pw-1-8”) { window.location.href = demoNext; } [where demoNext is the next page URL]

- Documentation lacks information about changing defaultValues as this is very useful to drasticaly reduce js size on tours with lots of steps

- It would be very cool to find a way of having steps load via AJAX but without adding a single line of code to the tour page. right now you still have to add at least one div per step.

- Same goes for the powertour-footer … why must I add unnecessary markup to the page code when it can be appended with jQuery to the document upon tourRun? If a user doesn’t trigger the demo that block of code is useless and only adds to the page load time.

- Tour single-step div is hard to style as it inherits different rules depending on parent element. If you hook that step to a button it gets to be the child of the button while if you hook the step to a .navbar the step markup will be the navbar child.

Hello, is it possible to use this plugin directly inside HTML with data attributes?

No, it doesn’t go to the next step, please see the image:

Okay, but why build a tour witht missing steps?

When I use the plugin in a Master layout (ASP.NET MVC), there are few elements that are not available in every page/view, therefore I would need to write my steps once and let the plugin ignore if it doesn’t exist. Now, I have written the same steps for multiple pages/views.

wordpress version?

Hello, I’d Like to know if you plugins supports Single Pages Apps built with ReactJS architecture. Do you have any user case that was successful for this or a similar scenario?

Sorrywe dont have any info about an reactjs scenatio.