从 JoyRide (jquery) 更改基础工具提示的位置答案

【问题标题】：Change the position of foundation's tooltip from JoyRide (jquery)从 JoyRide (jquery) 更改基础工具提示的位置
【发布时间】：2014-11-07 08:50:35
【问题描述】：

我正在我的页面上制作 Foundation 的 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"); 
    });
});

有什么想法吗？

【问题讨论】：

Joyride Javascript 将覆盖您设置的样式属性，因此它将不起作用。一旦 Joyride Javascript 运行，您将需要重置它。查看文档 (foundation.zurb.com/docs/components/joyride.html) 有一个函数 pre_step_callback 您可以使用它来设置您需要的工具提示的位置
我会试着弄清楚这些功能，谢谢 kipty

标签： javascript jquery zurb-foundation

【解决方案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 步骤。

希望这会有所帮助。

【讨论】：