Bug Description

I noticed that after clicking the “Maybe later” CTA, the tooltip appears partially cut off from the side of the screen. As a result, the “X” (close) icon and the “Got it” CTA are not fully visible.

Steps to reproduce

• Set up Site Kit with Search Console connected but without Analytics connected.
• Ensure Search Console is out of the gathering data state.
• Click "Maybe Later" CTA and notice an issue.

Screenshots

Additional Context

• PHP Version:
• OS: [e.g. iOS]
• Browser: [e.g. chrome, safari]
• Plugin Version: [e.g. 22]
• Device: [e.g. iPhone6]

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• After clicking the Maybe later CTA in the Welcome Modal, the resulting tooltip anchored to the help menu icon is fully visible within the viewport of all screen sizes — no portion of the tooltip is clipped by the right edge of the screen.
• The tooltip's X (close) icon and the Got it CTA are both fully visible and clickable.
• The tooltip remains correctly anchored to the help menu icon — its arrow/pointer continues to indicate the help menu button.
• The fix applies across all variants of the Welcome Modal that show this tooltip (e.g. SC-connected without Analytics, gathering-data variant, data-available variant).

Implementation Brief

The solution is to pass a floaterProps property through to the JoyrideTooltip component's step configuration that will set the arrow style for the tooltip, allowing it to be positioned within the viewport without clipping.

• In assets/js/components/JoyrideTooltip.js:
  • Add a new prop floaterProps to the JoyrideTooltip component.
  • Pass the floaterProps property to the step object in the steps array.
  • Alias the existing floaterProps import to defaultFloaterProps to avoid a name conflict.
• In assets/js/components/AdminScreenTooltip/AdminScreenTooltip.js:
  • Add floaterProps to the set of properties retrieved from the admin-screen-tooltip value, and pass it to the rendered JoyrideTooltip component.
• In assets/js/components/WelcomeModal.tsx:
  • Add floaterProps to the tooltipSettings object, with the following value:

    {
        styles: {
            arrow: {
                margin: 42,
            },
        },
    }

Test Coverage

• Extend the tests for AdminScreenTooltip and WelcomeModal to cover the above changes.

QA Brief

• Set up Site Kit with Search Console connected but without Analytics connected.
• Ensure Search Console is out of the gathering data state.
• Click "Maybe Later" CTA
• Ensure that tooltip does not get cut off unlike the screenshot above.

Changelog entry

• Prevent help menu tooltip from being clipped in various viewports.