Измените положение всплывающей подсказки основания от 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'); 

Этап - шаг Joyride, начинающийся с 0.

Надеюсь, это поможет.