How can I disable/remove upper right corner "x" from a Foundation Joyride?

Question

Edit 7/16/15: I ended up using this between the <li> tags of the joyride I needed the "x" disabled on.
<script>$('.joyride-close-tip').remove();</script>
Not the most clean solution but does what i need.


Original Post
Documentation is here

If you open up the documentation page where they have a joyride example, all the joyrides will have a "x" in the upper right corner, but I don't want to have that show on most of the joyrides.

As far as I know, it's not good practice to remove the $joyride-tip-close elements from the .scss files. I also wanted to know how to do this without having to basically copy and paste all the joyride scss without the joyride-close-tip portion (which seems to be what styles the "x").

Thanks in advance.

Answer 1

find that class class="joyride-close-tip"

override it with display:none;

Answer 2

You can remove this by specifying a blank template for link in the options. But to do this you need to redefine the HTML templates, like this…

$(document).foundation({
  joyride: {
    template: {
      link        : '',
      tip         : '<div class="joyride-tip-guide"><span class="joyride-nub"></span></div>',
      wrapper     : '<div class="joyride-content-wrapper"></div>',
      button      : '<a href="#" class="small button joyride-next-tip"></a>',
      prev_button : '<a href="#" class="small button joyride-prev-tip"></a>'
    }
  }
}).foundation('joyride', 'start');

See http://foundation.zurb.com/docs/components/joyride.html