Tooltip (#8555)

* Working overlay, WIP

* Ok working with no overlay and global gesture handler

* Ok pretty good on native

* Cleanup

* Cleanup

* add animation

* add transform origin to animation

* Some a11y

* Improve colors

* Explicitly wrap gesture handler

* Add easier abstraction

* Web

* Fix animation

* Cleanup and remove provider

* Include demo for now

* Ok diff interface to avoid collapsed views

* Use dimensions hook

* Adjust overlap, clarify intent of consts

* Revert testing edits

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

src/style.css

@@ -334,3 +334,38 @@ input[type='range'][orient='vertical']::-moz-range-thumb {
   min-width: var(--radix-select-trigger-width);
   max-height: var(--radix-select-content-available-height);
 }
+
+/*
+ * #/components/Tooltip/index.web.tsx
+ */
+.radix-popover-content {
+  animation-duration: 300ms;
+  animation-timing-function: cubic-bezier(0.17, 0.73, 0.14, 1);
+  will-change: transform, opacity;
+}
+.radix-popover-content[data-state='open'][data-side='top'] {
+  animation-name: radixPopoverSlideUpAndFade;
+}
+.radix-popover-content[data-state='open'][data-side='bottom'] {
+  animation-name: radixPopoverSlideDownAndFade;
+}
+@keyframes radixPopoverSlideUpAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes radixPopoverSlideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}