Show tooltip on tap for touch devices

Except tooltips on buttons

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>
+  )
 }

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)}

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"

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({
+  const { x, y, refs, reference, floating, strategy, middlewareData } =
-    whileElementsMounted: autoUpdate,
+    useFloating({
-    placement,
+      whileElementsMounted: autoUpdate,
-    middleware: [
+      placement,
-      offset(8),
+      middleware: [
-      flip(),
+        offset(8),
-      shift({ padding: 4 }),
+        flip(),
-      arrow({ element: arrowRef }),
+        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