Feature Description

This came up while testing #12495

• On figma, the tooltip has a pointed 'arrow' to the help menu and a 'x' icon.

  Details

  

• On our implementation, the tooltip appears in the centre, there is no pointed arrow and there is no 'x' icon.
  We might need to double check this across other tooltips as well.

  Details

  

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

Acceptance criteria

• When the Welcome modal is closed by the Maybe later button in a mobile viewport, the tooltip is shown pointing to the help menu with a close button, instead of being shown as a modal.

Implementation Brief

• In assets/js/components/AdminScreenTooltip/AdminScreenTooltip.js

  • Introduce a tooltip setting flag (for example isModalOnMobile) that controls whether mobile/tablet should render as centered modal or anchored tooltip.
  • Default this flag to true to preserve current behavior for all existing tooltip consumers.
  • Route mobile rendering logic (target, placement, modal class, overlay behavior) through this flag so specific tooltips can opt out safely.
  • Keep desktop behavior unchanged (existing target fallback, placement fallback, and className behavior).

• In assets/js/components/WelcomeModal.tsx

  • Update tooltip settings so the welcome tooltip opts out of mobile modal rendering and stays anchored to the Help menu target. Pass isModalOnMobile as false

Test Coverage

• Update tests for WelcomeModal.test.tsx to verify welcome tooltip settings include the mobile rendering override.
• Update tests for AdminScreenTooltip.test.js to cover default mobile modal behavior and the per-tooltip mobile override behavior.

QA Brief

• Set up Site Kit with Analytics and setupFlowRefresh enabled
• Open the splash screen on a mobile device
• Dismiss the Welcome Modal and ensure that the tooltip points to the help menu icon

Please note that the tooltip will be cut off. It's a known problem and is being worked on in other issues.

Changelog entry

• Fix an issue that caused the tooltip associated with the welcome modal to appear in the center on smaller devices.