shipshapecode/shepherd

how to apply floatingUIOptions?

Closed this issue · 4 comments

seseun commented

i want to apply floatingUIOptions. autoUpdate ---> ancestorScroll : false
i need to fix tooltip's position. but i can't find how to apply floatingUIOptions. it just say

/**
 * Extra [options to pass to FloatingUI]{@link https://floating-ui.com/docs/tutorial/}
 */
floatingUIOptions?: object;

i can't resolve. can who help me?

const tour = useShepherdTour({
    tourOptions: {
      defaultStepOptions: {
        scrollTo: { behavior: 'smooth', block: 'center' },
        floatingUIOptions: {  // here
          autoUpdate: {
            ancestorScroll: false,
          },
        },
        ...

it is not working.

chuckcarpenter commented

@seseun you use them in the same way you would in floatingUI. Are you importing the function? e.g.,

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

These just get passed through and Shepherd doesn't do anything with them. I've not used that one specifically myself, so apologies I don't have an example. https://floating-ui.com/docs/autoupdate

seseun commented

@chuckcarpenter
i resolved with prevent body scroll.
thanks for answer😊

lonix1 commented

@chuckcarpenter I'm using the CDN script. What approach should I take?

chuckcarpenter commented

@lonix1 that shouldn't prevent you from setup via the global object. What exactly are you trying to accomplish?