From 4e800389973be23b6ddbf946ff1eea2c55d0bc74 Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Thu, 11 Aug 2022 19:32:38 -0700
Subject: [PATCH] Show tooltip on tap for touch devices

Except tooltips on buttons
---
 web/components/datetime-tooltip.tsx         |  9 ++++--
 web/components/feed/copy-link-date-time.tsx |  2 +-
 web/components/tipper.tsx                   |  2 ++
 web/components/tooltip.tsx                  | 33 +++++++++++++--------
 4 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/web/components/datetime-tooltip.tsx b/web/components/datetime-tooltip.tsx
index b6310672..7aaf61aa 100644
--- a/web/components/datetime-tooltip.tsx
+++ b/web/components/datetime-tooltip.tsx
@@ -12,11 +12,16 @@ export function DateTimeTooltip(props: {
   time: number
   text?: string
   children?: React.ReactNode
+  noTap?: boolean
 }) {
-  const { time, text } = props
+  const { time, text, noTap } = props
 
   const formattedTime = dayjs(time).format('MMM DD, YYYY hh:mm a z')
   const toolTip = text ? `${text} ${formattedTime}` : formattedTime
 
-  return <Tooltip text={toolTip}>{props.children}</Tooltip>
+  return (
+    <Tooltip text={toolTip} noTap={noTap}>
+      {props.children}
+    </Tooltip>
+  )
 }
diff --git a/web/components/feed/copy-link-date-time.tsx b/web/components/feed/copy-link-date-time.tsx
index 89e94816..cea8300a 100644
--- a/web/components/feed/copy-link-date-time.tsx
+++ b/web/components/feed/copy-link-date-time.tsx
@@ -30,7 +30,7 @@ export function CopyLinkDateTimeComponent(props: {
   }
   return (
     <div className={clsx('inline', className)}>
-      <DateTimeTooltip time={createdTime}>
+      <DateTimeTooltip time={createdTime} noTap>
         <Link href={`/${prefix}/${slug}#${elementId}`} passHref={true}>
           <a
             onClick={(event) => copyLinkToComment(event)}
diff --git a/web/components/tipper.tsx b/web/components/tipper.tsx
index c35cf965..dbacbee9 100644
--- a/web/components/tipper.tsx
+++ b/web/components/tipper.tsx
@@ -106,6 +106,7 @@ function DownTip(props: { onClick?: () => void }) {
       className="h-6 w-6"
       placement="bottom"
       text={onClick && `-${formatMoney(5)}`}
+      noTap
     >
       <button
         className="hover:text-red-600 disabled:text-gray-300"
@@ -126,6 +127,7 @@ function UpTip(props: { onClick?: () => void; value: number }) {
       className="h-6 w-6"
       placement="bottom"
       text={onClick && `Tip ${formatMoney(5)}`}
+      noTap
     >
       <button
         className="hover:text-primary disabled:text-gray-300"
diff --git a/web/components/tooltip.tsx b/web/components/tooltip.tsx
index 5ca41ed6..91f29c48 100644
--- a/web/components/tooltip.tsx
+++ b/web/components/tooltip.tsx
@@ -17,21 +17,23 @@ export function Tooltip(props: {
   children: ReactNode
   className?: string
   placement?: Placement
+  noTap?: boolean
 }) {
-  const { text, children, className, placement = 'top' } = props
+  const { text, children, className, placement = 'top', noTap } = 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, y, refs, 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 ?? {}
 
@@ -45,14 +47,19 @@ export function Tooltip(props: {
 
   return text ? (
     <>
-      <div className={clsx('peer inline-block', className)} ref={reference}>
+      <div
+        className={clsx('peer inline-block', className)}
+        ref={reference}
+        tabIndex={noTap ? undefined : 0}
+        onTouchStart={() => (refs.reference.current as HTMLElement).focus()}
+      >
         {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"
+        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 peer-focus:opacity-100"
       >
         {text}
         <div