Onboarding: Update tooltip position to left to unwanted overlay and screen shaking

[gavande1]

Related issues

• Fixes STU-454 and Hovering over WordPress version (i) icon creates unwanted overlay or/and shaking in the initial app screen #1334

Proposed Changes

• Update tooltip rendering position to avoid unwanted overlay and screen shaking

Testing Instructions

• Check out this PR.
• Apply temp change to see the onboarding screen.

diff --git a/src/components/app.tsx b/src/components/app.tsx
index c06b9cb..3224a7d 100644
--- a/src/components/app.tsx
+++ b/src/components/app.tsx
@@ -20,7 +20,7 @@ import { WhatsNewModal, useWhatsNew } from 'src/modules/whats-new';
 
 export default function App() {
        useLocalizationSupport();
-       const { needsOnboarding } = useOnboarding();
+       const { needsOnboarding } = { needsOnboarding: true }; //useOnboarding();
        const { isSidebarVisible, toggleSidebar } = useSidebarVisibility();
        const { showWhatsNew, closeWhatsNew } = useWhatsNew();

• Start the Studio by running npm start
• Click on Advanced settings
• Select a WordPress version number other than latest.
• The tooltip will be displayed.
• Hover the cursor on the info icon.
• Make sure the screen doesn't shake or create any additional overlay.

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[katinthehatsite]

The PR solves the issue for me 👍

Personally, I would move the icon close to WordPress versions but it is not at the matter of this PR so I am approving

[wojtekn]

I've added #1338 for improving the icon itself.