从JoyRide（jquery）更改基础工具提示的位置

Question

我在页面上制作了基金会的JoyRide（一堆工具提示出现在网站的不同位置）。

我想内容是动态创建的。 我尝试通过一些像素值定位最后一个工具提示，但无法获得任何结果（不起作用）。

所有生成的工具提示都具有类似的结构：

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

这是我应对这一挑战的方法：

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

有任何想法吗？

Answer 1

Joyride Javascript将覆盖您设置的样式属性，因此它将不起作用。

一旦Joyride Javascript运行，您将需要将其重置。 查看文档（foundation.zurb.com/docs/components/joyride.html），有一个函数post_step_callback

为此，您需要使用以下代码来调用该函数：

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');

该步骤是从0开始的Joyride步骤。

希望这可以帮助。