Improve documentation to clarify library dependencies and prop forwarding

README.md

@@ -8,7 +8,7 @@
 
 Showcase your app to new users or explain functionality of new features.
 
-It uses [react-floater](https://github.com/gilbarbara/react-floater) for positioning and styling.  
+It uses [react-floater](https://github.com/gilbarbara/react-floater) for positioning and styling, which in turn uses [Floating UI](https://floating-ui.com/) (formerly Popper.js).  
 And you can use your own components too!
 
 **View the demo [here](https://react-joyride.com/)** (or the codesandbox [examples](https://codesandbox.io/s/github/gilbarbara/react-joyride-demo))
@@ -61,6 +61,16 @@ export class App extends React.Component {
 
 > If you need to support legacy browsers you need to include the [scrollingelement](https://github.com/mathiasbynens/document.scrollingElement) polyfill.
 
+## Advanced Configuration
+
+React Joyride uses a component hierarchy for positioning and styling:
+
+```
+React Joyride → React Floater → Floating UI (formerly Popper.js)
+```
+
+You can pass options through this chain using the `floaterProps` prop to control tooltip positioning, arrow styling, and other advanced features. See the [styling documentation](https://docs.react-joyride.com/styling) for detailed examples and configuration options.
+
 ---
 
 Sponsored by

docs/README.md

@@ -51,3 +51,11 @@ export default function App() {
 ```
 
 > To support legacy browsers, include the [scrollingelement](https://github.com/mathiasbynens/document.scrollingElement) polyfill.
+
+## Library Architecture
+
+React Joyride uses [React Floater](https://github.com/gilbarbara/react-floater) for positioning and styling,
+which in turn uses [Floating UI](https://floating-ui.com/) (formerly Popper.js).
+
+To control the underlying positioning and styling behavior, you can pass options through 
+the component hierarchy using `floaterProps`. See the [styling documentation](styling.md) for more details.

docs/props.md

@@ -33,7 +33,41 @@ Disable autoscrolling between steps.
 Disable the fix to handle "unused" overflow parents.
 
 **floaterProps** `Partial<FloaterProps>`  
-Options to be passed to [react-floater](https://github.com/gilbarbara/react-floater).
+Options to be passed to [react-floater](https://github.com/gilbarbara/react-floater), which in turn passes certain options to [Floating UI](https://floating-ui.com/).
+
+This prop is essential for controlling advanced positioning, arrow styling, and tooltip appearance. It follows the component hierarchy: React Joyride → React Floater → Floating UI.
+
+Common uses include:
+```tsx
+floaterProps={{
+  // React Floater styling
+  styles: {
+    floater: { /* tooltip container styles */ },
+    arrow: { 
+      spread: 20, // Controls arrow width
+      length: 10  // Controls arrow height
+    },
+  },
+  // Floating UI configuration (formerly Popper.js)
+  // See: https://floating-ui.com/docs/modifiers
+  modifiers: {
+    // Arrow modifier: https://floating-ui.com/docs/modifiers#arrow
+    arrow: { 
+      options: { 
+        padding: 20 // Prevents arrow from reaching corners
+      } 
+    },
+    // Offset modifier: https://floating-ui.com/docs/modifiers#offset
+    offset: { 
+      options: { 
+        offset: ({ placement, reference, popper }) => [-20, 20] 
+      } 
+    },
+  }
+}}
+```
+
+See the [styling documentation](styling.md#component-hierarchy-and-advanced-styling) for more detailed examples and the [Floating UI modifiers documentation](https://floating-ui.com/docs/modifiers) for advanced positioning options.
 
 **getHelpers** `(helpers: StoreHelpers) => void`  
 Get the store methods to control the tour programmatically. `prev, next, go, close, skip, reset, info`.

docs/step.md

@@ -68,7 +68,7 @@ Step will inherit some properties from Joyride's own [props](props.md), but you
 - disableOverlay
 - disableOverlayClose
 - disableScrolling
-- floaterProps \(check the [getMergedStep](https://github.com/gilbarbara/react-joyride/blob/main/src/modules/step.ts) function for more information\)
+- floaterProps - Options passed to React Floater for positioning and styling. Step-level floaterProps are merged with component-level floaterProps, allowing per-step customization of tooltip appearance and positioning. See [styling documentation](styling.md#component-hierarchy-and-advanced-styling) for detailed examples.
 - hideBackButton
 - hideCloseButton
 - locale

docs/styling.md

@@ -72,3 +72,74 @@ Check [styles.js](https://github.com/gilbarbara/react-joyride/blob/main/src/styl
 Or, if you need finer control, you can use your own components for the beacon and tooltip. Check the [custom components](custom-components.md) documentation.
 
 If you want to customize the arrow, check [react-floater](https://github.com/gilbarbara/react-floater) documentation.
+
+## Component Hierarchy and Advanced Styling
+
+React Joyride uses a component hierarchy for positioning and styling:
+
+React Joyride → React Floater → Floating UI (formerly Popper.js)
+
+To control advanced positioning and styling behavior, you can pass options through this 
+component chain using the `floaterProps` prop:
+
+```tsx
+<Joyride
+  steps={steps}
+  floaterProps={{
+    // Styling for React Floater
+    styles: {
+      floater: { filter: 'none' },
+      arrow: { 
+        spread: 20,  // Controls arrow width
+        length: 10   // Controls arrow height
+      },
+    },
+    // Floating UI modifiers (formerly Popper.js)
+    modifiers: {
+      arrow: {
+        options: {
+          padding: 20, // Controls arrow positioning padding
+        },
+      },
+      offset: {
+        options: {
+          offset: ({ placement, reference, popper }) => [-20, 20], // Adjusts main tooltip position
+        },
+      },
+    },
+  }}
+/>
+```
+
+### Common Use Case: Adjusting Arrow Position for Rounded Corners
+
+A common styling challenge is adjusting arrow positioning when using tooltips with rounded corners.
+Here's an example of how to adjust the arrow position to accommodate border-radius styling:
+
+```tsx
+<Joyride
+  steps={steps}
+  floaterProps={{
+    styles: {
+      floater: { 
+        borderRadius: '8px', 
+      },
+      arrow: {
+        spread: 16,
+        length: 8,
+      }
+    },
+    modifiers: {
+      arrow: {
+        options: {
+          padding: 12, // Increase padding to prevent arrow from aligning with rounded corners
+        },
+      },
+    },
+  }}
+/>
+```
+
+For detailed Floating UI configuration options, see their [modifiers documentation](https://floating-ui.com/docs/modifiers), particularly the [arrow modifier](https://floating-ui.com/docs/modifiers#arrow).
+
+Note that solutions found in older issues (before v2) may not work with current versions due to the migration from Popper.js to Floating UI.