Foundation Joyride nub position

Question

I'm using Foundation's Joyride plugin and I can't find the way to position the nub of the tooltip on the left side of it. Hope someone has solved it before.

Answer 1

The nub's position can be set in the data-options attribute in the markup or passed in during initialization.

data-options attribute example:

<ol class="joyride-list" data-joyride>
    <li data-id="firstStop" data-text="Next" data-options="nub_position: left;">
        <p>nub_position: left;</p>
    </li>
</ol>

during initialization example:

// Set the default nub_position
$(document).foundation({
      joyride : {nub_position: 'left'}
});

// Start Joyride
$(document).foundation('joyride', 'start');

You can find out more about configuring Joyride at:

• http://foundation.zurb.com/docs/components/joyride.html
  • There is a section called Optional JavaScript Configuration at the bottom of the page that will give you an overview of what can be configured.
  • Note that the documentation makes it look like it can be refereed to as nubPosition, but you actually have to use nub_position. You can check the variable names in the Joyride JavaScript file.
• http://foundation.zurb.com/docs/javascript.html
  • A general overview of how to use and configure the JavaScript used by Foundation such as how to set defaults during initialization.
• http://zurb.com/playground/jquery-joyride-feature-tour-plugin
  • A great place to get started and to download a template that really shows off what joyride can do.
• http://cdpn.io/eKgIE
  • A CodePen I through together to test the nub positioning.

If you have any questions let me know.