How to modify __floater class styles??

[Parthvsquare]

  {
    target: '.tour-yourTask',
    content:
      'Find tasks that need your attention here. We have added demo tasks to help you get started!',
    placementBeacon: 'right',
    disableCloseOnEsc: true,
    spotlightPadding: 0,
    placement: 'right-end',
    title: 'Metric AI',
    styles: {
      tooltipContainer: {
        top: '15%',
      },
    },
    // offset: 100,
    floaterProps: {
      disableAnimation: true,
      // offset: 100,
      styles: {
        floater: {
          paddingTop: '160px',
          top: '100px !important',
        },
      },
    },
  },

tried using the floaterProps: styles but it did not work.
also tried directly manipulating the dom

  useEffect(() => {
    // Create a MutationObserver instance to watch for changes in the DOM
    const observer = new MutationObserver((mutationsList, observer) => {
      for (let mutation of mutationsList) {
        if (mutation.type === 'childList') {
          const joyRideFloater = document.querySelector('.__floater') as HTMLElement
          if (joyRideFloater) {
            joyRideFloater.ariaLabel = primaryProps['aria-label']
            // joyRideFloater.  = primaryProps['data-action']
            joyRideFloater.role = primaryProps['role']
            joyRideFloater.style.top = '100px'

            // once the element is found and the event listener is added
            // then it stop observing
            observer.disconnect()
          }
        }
      }
    })

    // start observing the document with the given parameters
    observer.observe(document, { childList: true, subtree: true })

    // clean up function to remove the event listener when the component unmounts
    return () => {
      observer.disconnect()
      const joyRideFloater = document.querySelector('.__floater')
      if (joyRideFloater) {
        // @ts-expect-error
        // !fix it later (type error)
        joyRideFloater.addEventListener('click', primaryProps.onClick)
      }
    }
  }, [])

this too did not worked

[gilbarbara]

Hey @Parthvsquare
Popper.js calculates the positioning, and it will override the static styles.
The element responsible for positioning is the parent of the .__floater one.
You might be able to override the transform property of the parent instead, but I never tried.