Use floatingUIOption

[tyranthacker]

I had attempted to use Floating UI Option but it seems like I am not doing something right, because when I added the code it then the tour does not start. I only want to push the popper away from the element by 10px.

tour.addStep({ id: 'step1', text: 'Text for step', scrollTo: { behavior: 'smooth', block: 'center' }, attachTo: { element: '.test', on: 'bottom' }, floatingUIOptions: { middlewares: [offset({ mainAxis: 0, crossAxis: 12 })] }, buttons: [{ text: 'Next', action: tour.next }] });

[RobbieTheWagner]

Use middleware not middlewares.

[tyranthacker]

Is FloatingUi already included with shepherd.js or does it need to be included/ imported like on: https://floating-ui.com/docs/getting-started

[RobbieTheWagner]

When you say "will not start" what do you mean? I suspect you have errors in the console. If you can create a reproduction, I can help debug.

[tyranthacker]

`const tour = new Shepherd.Tour({
useModalOverlay: true,
tourName: 'Test',
defaultStepOptions: {
exitOnEsc: true
}
});

tour.addStep({
id: 'step1',
text: 'Step 1 Text',
canClickTarget: false,
modalOverlayOpeningRadius: 10,
modalOverlayOpeningPadding: 25,
floatingUIOptions: {
middleware: [offset({ mainAxis: 0, crossAxis: 12 })]
},
scrollTo: {
behavior: 'smooth',
block: 'center'
},
attachTo: {
element: '.test1"]',
on: 'bottom'
},
buttons: [{
text: 'Next',
action: tour.next
}]
});

tour.addStep({
id: 'step6',
text: 'Step 2 Text',
modalOverlayOpeningRadius: 10,
scrollTo: {
behavior: 'smooth',
block: 'center'
},
attachTo: {
element: '.test2',
on: 'bottom'
}
});

tour.start();`

Console:
https://ibb.co/vQ51Ftt

[RobbieTheWagner]

@tyranthacker the error is very clear, you need to import offset. https://floating-ui.com/docs/offset

[tyranthacker]

Sorry, I’m new to using shepherd. I didn’t know we had to import. That’s what I was asking before. I didn’t see any mention of it in your documentation. I appreciate the help.