Update Tooltips styles to match GM2+ designs

Bug Description

Currently the tooltips look almost like dropdown menus, resulting in an odd user experience.

Screenshots

Tooltip:

Dropdown menu:

---

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

Acceptance criteria

• General Site Kit tooltips (e.g. in SK header bar and dashboard sharing modal) should be styled as per the designs in Figma.

Note: TourTooltips should not be affected by changes made to the Tooltip component.

Implementation Brief

• Regression was introduced as part of the changes in #5444
• Using assets/sass/components/global/_googlesitekit-tooltip.scss,
  • Remove/update the styles for .googlesitekit-tooltip.MuiTooltip-tooltip and .googlesitekit-tooltip .MuiTooltip-arrow to match the Tooltip styles we have in the Figma designs, i.e more rounded corners, black background color,etc
• All tooltips styles should be consistent which means undoing the work done in #5444

Test Coverage

• No new tests to be added.

QA Brief

• Locate a tooltip (SK header, dashboard sharing, etc)
• Compare the styling of the element and ensure it matches the figma design provided in the AC
• If inspecting using the devtools is necessary, you can force the tooltip to stay open by enabling a breakpoint for attributes on the element triggering the tooltip (see screenshots below)

Screenshots

Locate an element that has a tooltip, here I’m using the dashboard sharing trigger

Right click it and set it to break on attribute modifications

Click the forward arrow to step through the code, until the tooltip appears. It can now be inspected and wont go away until you remove the breakpoint

Changelog entry

• Update Tooltip styles to match GM2+ designs.

[aaemnnosttv]

The only question I have is why we have a tooltip also for the Account (appears at 0:07 in the video Darren had linked). Especially with how we’re planning to redesign the menu to include the account (see #5775), it will be repetitive.

@marrrmarrr this is consistent with most other Google web interfaces (e.g. Gmail, Drive, Docs) which have a tooltip for the user menu which also includes the same information. It is redundant but is probably there for accessibility and consistency with other menu buttons. Our implementation is largely mirroring the pattern which is already present across many major Google products 🙂

Closing this out for the release as you’ve noted it isn’t release blocking. Thank you!

[asvinb]

@felixarntz I thought we wanted to keep the styles for the dashboard sharing tooltip to match the Figma designs, hence why we had #5444 However, I see your point of having all tooltips to be consistent and match what we have in the designs for Tooltips. I’ve updated the IB, let me know what you think.