Tooltip overlapping the header

[asvinb]

Bug Description

Currently tooltips have a very high z-index (20000) which results in them being on top of other elements on the page. However we have an issue with sticky elements where there is an overlap. This is the case with the header where on small screens, upon scrolling the page, the tooltip overlaps the header.

Steps to reproduce

1. Go to the Analytics module setup screen on a mobile device/small viewport.
2. Click on 'Connect Google Analytics 4'
3. The tooltip is displayed.
4. Scroll up the page
5. Notice how the tooltip overlaps the header.

Screenshots

---

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

Acceptance criteria

• The tooltip to setup a GA4 property only should not overlap the header upon scrolling on small screens.

Implementation Brief

• Using assets/js/modules/analytics/components/settings/GA4SettingsControls.js,
  • Update JoyrideTooltip to include the styles prop with the following value:

  {
      options: {
          zIndex: 10,
      },
  }

Test Coverage

• No new tests to be added.

QA Brief

• Follow Steps to reproduce - tooltip should be fixed now as per screenshot:

Changelog entry

• Prevent the "Set up Google Analytics 4..." Tooltip from overlapping the header on page scroll.

[aaemnnosttv]

@asvinb The tooltip you have shown is really a one-off feature tour (without the backdrop) which should be on a higher plane than pretty much everything else. If we want a different behavior in this case, we should maybe have a more "inline" version of this or perhaps add a class to this instance specifically which reduces its z-index rather than lowering it for all which would break tours that highlight elements of the header/navigation, for example.

[asvinb]

@aaemnnosttv Agree with not lowering the tooltip z-index globally but instead changing the z-index only to be lower than the header z-index only for this tour.

[tofumatt]

ACs are good 👍🏻

[eugene-manuilov]

IB ✔️

[wpdarren]

QA Update: ❌

@sashadoes I have an observation that I'd like to run by you.

All looks good on small screen sizes like mobile and tablet, but on desktop when I scroll down, the tooltip shifts placement and now it doesn't overlap the WordPress side menu, and looks a little odd.

This is 1.92.0 the latest release

This is how I see it now on the develop branch

Interested in your thoughts here, but in my opinion, I do think it should overlap on the side menu.

[wpdarren]

QA Update: ✅

Verified:

• On small screen sizes, the tooltip to setup a GA4 property does not overlap the header upon scrolling.
• I also tested this on desktop to ensure that the behaviour is the same as currently. Found an issue which is now fixed.
• Tested on various small screen devices like mobile and tablet on our supported browsers.

Note: I did discover a styling issue on small screen sizes related to the tooltip but it wasn't a regression related to this ticket, so will create a separate ticket for it.

Screenshots