[Tooltip] Tweak animation duration and box-shadow (#8629)

### WHY are these changes introduced?

After liaising with @dGoligorsky we wanted to tweak some of the
primitive values for the Tooltip, namely the animation duration and the
box-shadow for the overlay. The animation felt too slow, and the shadow
meant that Tooltips being displayed over white backgrounds were quite
hard to distinguish.

We have sped up the animation duration from 200ms to 50ms, and added an
extra shadow on top of the `--p-shadow-popover` for the Tooltip to
ensure the top edge is visible.

Spin URL:
https://admin.web.tooltip-tweak-demo.marc-thomas.eu.spin.dev/store/shop1/products/1


### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Author: mrcthms

.changeset/shy-plums-shout.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Updated the animation duration and box-shadow for the `Tooltip`

polaris-react/src/components/Tooltip/Tooltip.stories.tsx

@@ -232,7 +232,7 @@ export function ActivatorAsDiv() {
 
 export function WithSuffix() {
   return (
-    <Box padding="16">
+    <Box padding="16" background="surface">
       <LegacyStack>
         <ButtonGroup segmented fullWidth>
           <Tooltip content="Bold" suffix="⌘B" activatorWrapper="div">

polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss

@@ -7,7 +7,7 @@
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   margin: var(--pc-tooltip-overlay-offset) var(--p-space-4) var(--p-space-4);
   opacity: 1;
-  box-shadow: var(--p-shadow-popover);
+  box-shadow: var(--p-shadow-popover), var(--p-shadow-lg);
   // stylelint-disable-next-line -- Polaris component custom properties
   border-radius: var(--pc-tooltip-border-radius);
   pointer-events: none;
@@ -48,7 +48,7 @@
 }
 
 .measured:not(.instant) {
-  animation: var(--p-keyframes-appear-below) var(--p-duration-200)
+  animation: var(--p-keyframes-appear-below) var(--p-duration-50)
     var(--p-ease-in) var(--p-duration-100) 1 both;
 
   // stylelint-disable-next-line -- Not a breakpoint
@@ -58,7 +58,7 @@
 }
 
 .measured.positionedAbove:not(.instant) {
-  animation: var(--p-keyframes-appear-above) var(--p-duration-200)
+  animation: var(--p-keyframes-appear-above) var(--p-duration-50)
     var(--p-ease-in) var(--p-duration-100) 1 both;
 
   // stylelint-disable-next-line -- Not a breakpoint