jQuery Joyride plugin - nothing happens?

Question

I'm having a lot of trouble getting the Joyride plugin for jQuery to work. I thought it seemed pretty simple, but it's not happening.

I have the following script includes on my page:

<script src="/Scripts/jquery-1.11.0.js"></script>
<script src="/Scripts/jquery.cookie.js"></script>
<script src="/Scripts/jquery.joyride-2.1.js"></script>
<script src="/Scripts/application.js"></script>

And all three are loading correctly. In application.js I have called joyride in the following way:

$(window).load(function () {
    $('#tour').joyride();
});

And my HTML looks like this:

<ol id="tour">
    <li><p>This is the tour.</p></li>
</ol>

For some reason, absolutely nothing is happening when I load the page. I don't get any errors in the console, literally nothing happens. Anyone had this problem?

Aren't you meant to have a `data-id` attribute on the `li` which says the id of the element on which you want the tooltip to appear? — tfogo, May 06 '14 at 01:34
Oh yeah, that's not necessary - it just pops up as a modal if you leave that out. — tfogo, May 06 '14 at 02:06
@tfogo - yep, that's correct. Thanks for looking into it though :) — Nick Coad, May 06 '14 at 04:33

score 5 · Accepted Answer · answered May 06 '14 at 02:04

To see anything happen, put the option autoStart: true into the joyride function:

$(window).load(function () {
    $('#tour').joyride({
        autoStart: true
    });
});

Here's a working plunk.

By the way, if you give your ol an id of joyRideTipContent that will automatically be set to display: none by the CSS.

jQuery Joyride plugin - nothing happens?

1 Answers1