Change the position of foundation's tooltip from JoyRide (jquery)

Question

I'm making a Foundation's JoyRide on my page (a pack of tooltips appear in different positions of the site).

The content is created dynamically I suppose. I try to position the last tooltip by some pixels value, but can't get any results (not working).

All the generated tooltips have similar structure:

<div class="joyride-tip-guide" data-index="1" style="visibility: visible; display: block; top: 349px; left: 929.5px;">

Here's my approach to this challenge:

$(document).ready(function(){
    $('body').on('div.joyride-tip-guide',function(){
        $(this).last().css("margin-top","150px"); 
    });
});

Any ideas?

Answer 1

The Joyride Javascript will override the style attribute you have set and therefore it will not work.

You will need to reset it onece the Joyride Javascript has run. Looking at the docs (foundation.zurb.com/docs/components/joyride.html) there is a function post_step_callback

Looking into this you need to use the following to get the function to be called:

var stepNumber = 3;//the step you want to position

$(document).foundation('joyride', {
  post_step_callback: function(step) {
      console.log('post_step_callback', step);
      if(step === stepNumber)
        //do your resetting of the position here
      }
  }
});
$(document).foundation('joyride', 'start');

The step is the Joyride step starting at 0.

Hope this helps.