Discussion on Power Tour - Powerful Creative jQuery Tour Plugin


CreativeMilk supports this item


116 comments found.

Thanks CreativeMilk for all your great help so far.

However, now one more issue -

I want to highlight a block of text – yet its totally black once I the step highlights it.

Is this a bug? I’ve done a hookTo like this ”.content_header_title h2”

Here is a screenshot. http://content.screencast.com/users/digital_soul18/folders/Jing/media/7f949d10-1f1d-459b-b2d4-5c52445acbed/00000143.png

Ok ignore that – I achieved it by adding
$('.content_header_title h2').css('background-color', '#ffffff')
to the
onShowStep      : function(ui){  
$('.content_header_title h2').css('background-color', '#ffffff')
now its AWESOME! :)

In the version 2.4.0, there is an issue when having only one tour that probably show a bug when more than one tour:

When only one tour is set, this appear:

Uncaught TypeError: Cannot read property 'startWith' of undefined

It seems to come from line 1337 and the line before in the JS:

var tourVar = (tourVar == 0) ? 1 : tourVar; var st = self.o.tours[tourVar].startWith;

An array always start at index 0, so this would result in:

  • If one tour, to not be able to find the right start
  • If more than one tour, to select the wrong “startWith” value.

It is also the case at line 1100 / 1134 / 1150, in fact, everywhere the ID is used.

I see the small issue, and we have fixed this, so we will update the files ASAP!

Thanks for your message! :-)


Dioplr Purchased


I am looking to buy your plugin but I have one question. Is it a way to start automatically the tour, the first time the users comes in the website and manually the following times (based on cookie or user login)?

Thanks in advance,


Yes, you can trigger a tour in a couple of ways, 1 of them is automatic, if you combine this with a cookie/db/local storage you can allow to run(automatic) the tour just once per user. See docs/extend for more about this

Hey CodeCanyon,

I want to hook to one CSS ID but to highlight two CSS ID’s because they are related. How can I achieve this?

For example – a step is has a HookTo on one element but the highlight spans over two elements.

5 minutes later I find the answer:


Thanks anyway

Hi there, would this work on any website like, joomla(all verisons) and simple html websites? if so, do I need to have coding skills? Please brief Regards Pal

The plugin will work on all site, but you have to have access to the source code. You need some skills to understand the basics of coding, if you do have this than the plugin will be pretty easy to use.

thanks for the prompt answer

I am getting a typeError of step.show(...).offset(...) is undefined 538:21

It is preventing firefox and safari (haven’t tested) ie yet… from going to the next slide.

ahhh ok… thanks for the tip. I will try that. Eventually we want to do that anyway.

Ok put all the code in one place and the error is still occurring… TypeError: undefined is not an object (evaluating ‘step.show().offset().top’)

wait… check that last error… we have dynamic content that upon using on demonstration the user wasn’t logged in and the dom tree was different. sorry about that. I will test further and let you know. thanks

How can we link to other parts of the tour on different pages when there is a method called to initiate the tour? When I get to the other page doesn’t fire.

Yes I have the method called to initiate the tour but upon going to the next page and using the above method it won’t initiate. I was wondering if using a method per page would do the trick?

Page A :build the tour for page A, from this page you can use for example a parameter inside the url to trigger the tour.

Page B : build the tour for page B, if a parameter is used the tour called will auto run. If you are using the method called ‘run’ you should place this line AFTER the plugin call.

Which type of tour trigger are you using?

I am thinking of starting the tour like page B but when I go to a particular step… i.e. step 5 it will be on a different page. the issue is when I get to the other page the tour doesn’t initiate again.

Just a thought… But if I use a call back method endTour to initiate a particular page tour and step… then what if I want to really cancel out of the tour with a button?

My thoughts were to wrap the call back in this type of function. Your thoughts… This works just wanted to see if there was a better method?

$(‘a.finished’).click(function() { window.location.href = ”/?powertour=1&startwith=2”; });

actually the above didn’t work because the click event wasn’t loaded until the button is clicked. this works better… this must be a but or something as .click should

$(“a.finished”).on(‘click’, function(){ window.location.href = ”/?powertour=1&startwith=2”; });

ok I used this code in the function onStartTour… it makes more sense for it to be there so the link is loaded upon upon clicking any button that has

$("a.endtour").click(function() {
                        window.location.href = "/?powertour=1&startwith=10";

If you want to use a button with a exit url, why not use the button as a button, so use

<a href="www.exit.com?powertour=1">exit</a>

Also you can use your code outside the callback functions, as they dont requier the use of a callback function(the button is hidden when the tour is not active right?)

Hi! Every time I set a position value different of “stm” (like rb or tm) I got a “Uncaught TypeError: Cannot read property ‘top’ of undefined”.

I’d appreciate any workaround of this.

As the documentation mentions, all screen positions don’t need the use of the ‘hookTo’ option, all regular position DO…;-)

Sorry for the delay and thanks for your help. I disabled hookTo on every step but still appears the message error. I can’t figure out what I’m doing wrong :(

Forget it :) It was my fault!

Two new issues that they’re driving me mad:

  • I don’t know how it works highlight option. Whatever I try differents options I always get this: http://uploadpie.com/5OPNr (screenshot)
  • Is there an option that I missing or something that it doesn’t work scrolling from a top step to a bottom step? Like the demo tour 1 step three -> step four


A highlighted step makes use of the z-index property so in most cases some other css rule is overriding this. Use the console to look for the rule that is causing this issue.

Can you explain the last question as I don’t understand what the problem is.

Looks like a great tool. I am guessing this would be tricky to use with WordPress? Thanks

Not really, if you can access the theme source code its pretty simple if you ask me.

ok great, so by changing a config file or something in the source code you can get this to work on any page? super

Hi! Could I use this plugin with my Prestashop site? Would love to know how I would integrate this with Prestashop.

Yes if you can access the source code of your site you can use this plugin in your site.


mroth20 Purchased

Helllo! We just started working with the power tour.

Unfortunately we are experiencing trouble with getting started. We are missing some very basic step by step examples. Especially the usage and placement of the html content within the site is not understandable for us.

Do you have some basic tutorials? Regards

Correct me if I am wrong but you are looking for tutorials about the content of a step?

I have an issues with animations not “finishing” to leave modals up and off the page upon finishing the step. The specific animation is slideOutUp but the animation takes the modal up only a little and then it stops and stays behind and never disappears. Is there a setting or something that would be causing that?

thanks I will check that out

ok the issue apparently has always been there I just hadn’t noticed it… what is happening is on the fxout effect the slideout doesn’t go up the entire way or doesn’t fadeout at some point? I don’t really see how this can be addressed other than having the fx to be fadeOut instead.. Is there a way to set how far away the animation goes to when it is animating? i.e. far enough off the screen to disappear?

I’ve spoken with the dev, and he says that this is an overflow issue, so you need to add an overflow:hidden on the main/parent container.(see frontage.css -> #container)

I have one important issue that I need to resolve as well. There are a few ways to initiate the tour. How do you suggest a scenario where the tour is initiated through a method but travels to other pages on the site through direct links? The issue I am running into is that the tour initiates through a method but upon using a direct link the tour trips up and trys to reinitiate it through the method.

is there any reply to this? I am trying to think of ways to address the issue and none is coming to mind. so far I have been able to mask the initiating to a specific datatype. however when on that particular homepage that allows for the initiation I cannot stop the animation as it calls for a different step other than 1 but it only goes to step 1 over and over again… i.e. the step initiated by the method.

Ok i figured this out and posted it so you can share with others. The best way to handle this from my perspective is to determine if the tour is running or not… along with any other logic needed to run the tour. // run the tour if it is not running and data-type === param

if ( $('body').attr('data-powertour-run') === undefined && $('body').attr('data-type') === 'something' ) {
     $.powerTour( 'run' , 1 );

I have a question about animations. Sometimes the tour doesn’t fit into the screen just how you want it. I have setup some setTimeout functions to animate but they seem to be fighting a little bit with the animation in general. Is there a way to specifically alter the animation’s initial landing position perhaps with just css? Thanks.

                                    $('html, body').animate({scrollTop:420}, 600, 'swing');
                                }, 800);

Correct me if i am wrong, but when the tour is to big for the screen you want the tour to re-fit to the screen like in being responsive or just scroll to the top of the tour(active step)?