CreativeMilk supports this item


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

149 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 :-)


mb111 Purchased

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)


mb111 Purchased

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.

Thank you !

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

i have no quick demo but you can try it yourself? the step is inserted into the dom..thats why it is get his styles from the parent…why inserting it into the dom?

only if you click outside the table and not on tr td tbody etc ..the step is removed…but why do you insert the step into the dom (in the hook) if its already there? you only have to position it absolute and use the position method from jquery

The steps are moved to the hooks this because it is more flexible and requieres less code(we try to keep the plugin as lite as possible). This means that it can indeed inherit the parents CSS rules but this can be easily fix by writing proper CSS.Regarding the issue with the tables, if we setup a tour with a table the tour stops when we click on a different cell(please see examples -> tables).