Stop mobile tooltip crop (daisy -> floating-ui)

functions/package.json

@@ -25,14 +25,15 @@
   "main": "functions/src/index.js",
   "dependencies": {
     "@amplitude/node": "1.10.0",
+    "@floating-ui/react-dom": "1.0.0",
     "@google-cloud/functions-framework": "3.1.2",
     "@tiptap/core": "2.0.0-beta.181",
     "@tiptap/extension-image": "2.0.0-beta.30",
     "@tiptap/extension-link": "2.0.0-beta.43",
     "@tiptap/extension-mention": "2.0.0-beta.102",
     "@tiptap/starter-kit": "2.0.0-beta.190",
-    "dayjs": "1.11.4",
     "cors": "2.8.5",
+    "dayjs": "1.11.4",
     "express": "4.18.1",
     "firebase-admin": "10.0.0",
     "firebase-functions": "3.21.2",

web/components/tipper.tsx

@@ -103,7 +103,8 @@ function DownTip(props: { onClick?: () => void }) {
   const { onClick } = props
   return (
     <Tooltip
-      className="tooltip-bottom h-6 w-6"
+      className="h-6 w-6"
+      placement="bottom"
       text={onClick && `-${formatMoney(5)}`}
     >
       <button
@@ -122,7 +123,8 @@ function UpTip(props: { onClick?: () => void; value: number }) {
   const IconKind = value >= 10 ? ChevronDoubleRightIcon : ChevronRightIcon
   return (
     <Tooltip
-      className="tooltip-bottom h-6 w-6"
+      className="h-6 w-6"
+      placement="bottom"
       text={onClick && `Tip ${formatMoney(5)}`}
     >
       <button

web/components/tooltip.tsx

@@ -1,15 +1,73 @@
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  offset,
+  Placement,
+  shift,
+  useFloating,
+} from '@floating-ui/react-dom'
 import clsx from 'clsx'
+import { ReactNode, useRef } from 'react'
+
+// See https://floating-ui.com/docs/react-dom
+
+export function Tooltip(props: {
+  text: string | false | undefined | null
+  children: ReactNode
+  className?: string
+  placement?: Placement
+}) {
+  const { text, children, className, placement = 'top' } = props
+
+  const arrowRef = useRef(null)
+
+  const { x, y, reference, floating, strategy, middlewareData } = useFloating({
+    whileElementsMounted: autoUpdate,
+    placement,
+    middleware: [
+      offset(8),
+      flip(),
+      shift({ padding: 4 }),
+      arrow({ element: arrowRef }),
+    ],
+  })
+
+  const { x: arrowX, y: arrowY } = middlewareData.arrow ?? {}
+
+  // which side of tooltip arrow is on. like: if tooltip is top-left, arrow is on bottom of tooltip
+  const arrowSide = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right ',
+  }[placement.split('-')[0]] as string
 
-export function Tooltip(
-  props: {
-    text: string | false | undefined | null
-  } & JSX.IntrinsicElements['div']
-) {
-  const { text, children, className } = props
   return text ? (
-    <div className={clsx(className, 'tooltip z-10')} data-tip={text}>
-      {children}
-    </div>
+    <>
+      <div className={clsx('peer inline-block', className)} ref={reference}>
+        {children}
+      </div>
+      <div
+        role="tooltip"
+        ref={floating}
+        style={{ position: strategy, top: y ?? 0, left: x ?? 0 }}
+        className="z-10 max-w-xs rounded bg-slate-700 px-2 py-1 text-center text-sm text-white opacity-0 transition-opacity peer-hover:opacity-100"
+      >
+        {text}
+        <div
+          ref={arrowRef}
+          className="absolute h-2 w-2  rotate-45 bg-slate-700"
+          style={{
+            top: arrowY != null ? arrowY : '',
+            left: arrowX != null ? arrowX : '',
+            right: '',
+            bottom: '',
+            [arrowSide]: '-4px',
+          }}
+        />
+      </div>
+    </>
   ) : (
     <>{children}</>
   )

yarn.lock

@@ -2178,6 +2178,25 @@
   resolved "https://registry.yarnpkg.com/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.6.1.tgz#0c74724ba6e9ea6ad25a391eab60a79eaba4c556"
   integrity sha512-9FqhNjKQWpQ3fGnSOCovHOm+yhhiorKEqYLAfd525jWavunDJcx8rOW6i6ozAh+FbwcYMkL7b+3j4UR/30MpoQ==
 
+"@floating-ui/core@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.0.1.tgz#00e64d74e911602c8533957af0cce5af6b2e93c8"
+  integrity sha512-bO37brCPfteXQfFY0DyNDGB3+IMe4j150KFQcgJ5aBP295p9nBGeHEs/p0czrRbtlHq4Px/yoPXO/+dOCcF4uA==
+
+"@floating-ui/dom@^1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.0.1.tgz#3321d4e799d6ac2503e729131d07ad0e714aabeb"
+  integrity sha512-wBDiLUKWU8QNPNOTAFHiIAkBv1KlHauG2AhqjSeh2H+wR8PX+AArXfz8NkRexH5PgMJMmSOS70YS89AbWYh5dA==
+  dependencies:
+    "@floating-ui/core" "^1.0.1"
+
+"@floating-ui/react-dom@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-1.0.0.tgz#e0975966694433f1f0abffeee5d8e6bb69b7d16e"
+  integrity sha512-uiOalFKPG937UCLm42RxjESTWUVpbbatvlphQAU6bsv+ence6IoVG8JOUZcy8eW81NkU+Idiwvx10WFLmR4MIg==
+  dependencies:
+    "@floating-ui/dom" "^1.0.0"
+
 "@google-cloud/firestore@^4.5.0":
   version "4.15.1"
   resolved "https://registry.yarnpkg.com/@google-cloud/firestore/-/firestore-4.15.1.tgz#ed764fc76823ce120e68fe8c27ef1edd0650cd93"