Scale-tooltip content is not placed close to its corresponding scale-button-object within the scale-modal window

[equitable66]

Scale Version: 3.0.0-beta.116

Framework and version: "react": "^18.2.0"

Current Behavior: When a <ScaleTooltip> component with embedded <ScaleButton> is placed in the action slot of the <ScaleModal> component, the tooltip content is not placed close to its corresponding object within the modal window, but far away.

Code Reproduction

<scale-modal heading="Today is your lucky day"
             duration="200"
             align-actions="right"
             class="hydrated"
             opened="">
	<p>Hello. Welcome. What a pleasure it is to have you.</p>
	<!---->
	<scale-tooltip content="Tooltip"
	               placement="top"
	               trigger="hover focus"
	               flip="true"
	               class="hydrated"
	               slot="action">
		<scale-button icon-position="before"
		              class="hydrated">Hover me</scale-button>
	</scale-tooltip>
	<scale-button slot="action"
	              icon-position="before"
	              class="hydrated">
            Primary Action
	</scale-button>
</scale-modal>

Expected Behavior: The tooltip content is displayed close to its corresponding button

Additional context: Probably the "Floating UI" library used by the <ScaleTooltip> component has a problem with the coordinate calculation of the display position of the tooltip content in the modal window and its relative position to the main window behind it. Probably the error of the issue "Horizontal scroll appearing when using scale tooltip #1642" has the same cause

[niclas18]

We have exactly the same problem in our project. However, I found a solution and will create a PR for it.