Wrong placement of tooltip whenever you add the floaterProps in the JoyRide

shubhsk88 commented 1 year ago

🐛 Bug Report

I wanted to hide the arrow in the tooltip as I am trying to customize my tooltip but to achieve that, I have to pass the floaterProps as soon as I add the floaterProps, the tooltip's position is wrong.

To Reproduce

https://codesandbox.io/s/amazing-pasteur-t25h3n?file=/src/App.tsx

Expected behavior

The floaterProps shouldn't completely override the default settings

Link to repl or repo (highly encouraged)

Please provide a https://codesandbox.io/ demo or similar.

Issues without a reproduction link are likely to stall.

Run `npx envinfo --system --binaries --npmPackages react-joyride`

Paste the results here:

 System:
    OS: macOS 13.4.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 56.44 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.18 - /opt/homebrew/bin/yarn
    npm: 8.19.4 - ~/work/cogs.js/node_modules/.bin/npm
    pnpm: 7.0.0-rc.3 - ~/Library/pnpm/pnpm
  npmPackages:
    react-joyride: ^2.5.4 => 2.5.4

gilbarbara commented 1 year ago

@shubhsk88

If you change the convertSteps's placement to bottom and remove the floaterProps's placement everything seems to work.

gilbarbara commented 1 year ago

Forcing the steps to be at top-end, there's no available space for the tooltip...

shubhsk88 commented 1 year ago

But why do I need to remove floaterProps because I don't want the arrow in the tooltip and currently that is the only way to get rid of tooltip

gilbarbara commented 1 year ago

@shubhsk88

floaterProps's placement

Remove only the placement prop in floaterProps, not everything.

gilbarbara commented 1 year ago

@shubhsk88 Did it work? Can we close this?

gilbarbara / react-joyride