[QUESTION] How to add offset from the focusing element for shepherd-content

[CrazyNoodl]

Hello,
Maybe there is a better way to add a custom margin for the description modal?

I did this by changing the styles, but the arrow's position was wrong

[CrazyNoodl]

after a few hours of investigations code and documentation, i found a solution
we should add this option in defaultStepOptions in tourOptions

import { offset } from '@floating-ui/dom';

floatingUIOptions: { middleware: [offset(10)], },

https://floating-ui.com/docs/offset

[vesper8]

@RobbieTheWagner

Can you please update the documentation?

https://shepherdjs.dev/docs/tutorial-04-cookbook.html

It says

floatingUIOptions: {
  middlewares: [offset({ mainAxis: 0, crossAxis: 12 })]
}

But there's a typo and it should be

floatingUIOptions: {
  middleware: [offset({ mainAxis: 0, crossAxis: 12 })]
}

It's also not so obvious that you have to import { offset } from '@floating-ui/dom'; and that the above goes inside defaultStepOptions

Thanks

[RobbieTheWagner]

The typo with middleware has been updated. floatingUIOptions is listed in the step options https://shepherdjs.dev/docs/Step.html, so it goes in either the step or defaultStepOptions. I will update it to make it more clear.