Make dashboard tour tooltips look good in all viewports

[techanvil]

Feature Description

The dashboard tour tooltips can be clipped or off-screen in a number of popular viewports.

We should ensure that the tooltips are fully visible and well-positioned in all viewports.

This was raised in the bug bash, see this Asana task, and also this related task.

---

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

Acceptance criteria

• The welcome tour tooltips should be improved so that they are not cut off in any viewport.
• They should have ample space in their surroundings so that they are fully visible and well positioned.
• Tooltip targets are adjusted where necessary to meet the above requirements - we don't have to adhere to the Figma design if it's not technically feasible, but should follow the intent of the design as closely as we can.

Implementation Brief

In assets/js/components/TourTooltips.js

• Update scrollStepIntoView() to remove the breakpoint-specific behaviour.
• Update remaining scrollStepIntoView() logic to treat the combined target and tooltip as the scroll target, and alter scrolling behaviour based on whether or not they both fit in the viewport:
  • Get the top-most and bottom-most edges of the target and tooltip, using whichever is furthest towards to the top and bottom of the document respectively.
  • If the space between those edges is shorter than the viewport, scroll the window to center the space.
  • If the space between the edges is taller than the viewport, scroll the corresponding window edge to the edge closest to the tooltip.
  • For each, include an offset so that there's space between the window edge and the scroll target after scrolling. For example, define an offset of 60 pixels and scroll to 60px away from the edge when scrolling to an edge, and include 2x60px when determining whether the tooltip and target area fits within the viewport so that the area is only considered as fitting if there is at least 60 pixels of space on either side.

In assets/js/feature-tours/welcome.ts

• Disable flipping for all welcome tour steps by passing floaterProps.modifiers.flip.enabled = false to the step properties.

Test Coverage

• Update any failing VRT tests.

QA Brief

1. After setup, visit the Site Kit dashboard, click the help icon and Start a feature tour.
2. Step through the tour steps forwards and backwards, verifying the following scrolling behaviour for a variety of viewports, including desktop and mobile where the viewport height is very short:
   • If there's enough room in the viewport to display the entire tooltip and spotlight section, the window will scroll to center them in the viewport.
   • If the tooltip and spotlight element do not fit inside the viewport:
     • If the tooltip is above the spotlight element, the window will scroll so that the top of the tooltip is towards the top of the viewport.
     • If the tooltip is below the spotlight element, the window will scroll so that the bottom of the tooltip is towards the bottom of the viewport.
     • If the tooltip is within the spotlight element, the window will scroll so that the top of the spotlight element is towards the top of the viewport.
   • When repeating the example viewports in the Asana tasks linked in the feature description above, the tooltips should never be cropped.
   • Widgets with tabs should not pull focus, causing the browser to scroll away from the tour without user input, particularly on mobile.
3. On mobile, smoke test the tabs in the audience "Understand how different visitor groups…" widget and "Top content over the last 28 days" widget to ensure they work as expected when navigated by keyboard and mouse.

One particular edge case worth double checking is the "Your goals, measured and clear" tooltip on mobile when the dashboard navigation wraps to two or more rows. Make sure the admin bar doesn't partially cover the tooltip. It should appear underneath the widget area and the whole tooltip should be visible in the viewport.

Changelog entry

• Ensure that tooltips in the dashboard tour are fully visible in all viewports.

[techanvil]

AC ✅

[JakePT]

@techanvil The underlying issue here is that when the tour scrolls to the next step it scrolls to the spotlight element. So if the spotlight element is tall enough, or the viewport small enough, the tooltip will not fit in view.

There's two approaches to fixing this that I can imagine:

1. When scrolling to the next step in the tour, scroll to the tooltip rather than the spotlight element, with the understanding that the spotlight element may be cropped by the viewport on the end opposite the tooltip if it's too tall. There appears to be some handling for this already, but it only seems to cover some instances.
2. Try and adjust the behaviour of the tooltip so that it can appear on top of or inside the spotlight element if the viewport is not tall enough to fit both in.

The first option will likely be much easier to implement, as this behaviour is controlled by our code, while the second option could get messy because we're dealing with a library within a library (react-floater inside react-joyride), and it could result in tooltips covering up what they're supposed to be describing.

I'd favour the first option, but I thought I'd check what you think. Thanks!

[JakePT]

@techanvil Just to keep things moving I picked an option and put through to IBR.