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.