Search code examples
zurb-foundationzurb-joyride

Use for Foundation Joyride tip_location_patterns option?


I'm playing around with Zurb's Foundation Joyride plugin and looking through the possible options. I've gotten some working but have no idea what one of the options does.

 tip_location_patterns: {
    top: ['bottom'],
    bottom: [], // bottom should not need to be repositioned
    left: ['right', 'top', 'bottom'],
    right: ['left', 'top', 'bottom']
 }

I cannot for the life of me figure out what these options are supposed to alter. Attempting to alter them in my project code does nothing, does anyone have any ideas what the purpose is of this, and how to get it working properly?

https://github.com/zurb/foundation/blob/master/js/foundation/foundation.joyride.js


Solution

  • It signifies the order in which joyride would try to re-position the tooltip.

    Example, if you set tip_location to be left (3rd option in tip_location_patterns above) and it doesn't fit on the screen, it'll re-position it on right & check if it fits, then top and finally bottom.

    See this piece of code :

        if (!this.visible(this.corners(this.settings.$next_tip)) && this.settings.attempts < this.settings.tip_settings.tip_location_pattern.length) {
    
          $nub.removeClass('bottom')
            .removeClass('top')
            .removeClass('right')
            .removeClass('left');
    
          this.settings.tip_settings.tip_location = this.settings.tip_settings.tip_location_pattern[this.settings.attempts];
    
          this.settings.attempts++;
    
          this.pos_default();
    
        }