Make all tooltips use our component

web/components/contract/contract-card.tsx

@@ -31,6 +31,7 @@ import { useUser } from 'web/hooks/use-user'
 import { track } from '@amplitude/analytics-browser'
 import { trackCallback } from 'web/lib/service/analytics'
 import { getMappedValue } from 'common/pseudo-numeric'
+import { Tooltip } from '../tooltip'
 
 export function ContractCard(props: {
   contract: Contract
@@ -333,22 +334,19 @@ export function PseudoNumericResolutionOrExpectation(props: {
           {resolution === 'CANCEL' ? (
             <CancelLabel />
           ) : (
-            <div
-              className={clsx('tooltip', textColor)}
-              data-tip={value.toFixed(2)}
-            >
+            <Tooltip className={textColor} text={value.toFixed(2)}>
               {formatLargeNumber(value)}
-            </div>
+            </Tooltip>
           )}
         </>
       ) : (
         <>
-          <div
-            className={clsx('tooltip text-3xl', textColor)}
-            data-tip={value.toFixed(2)}
+          <Tooltip
+            className={clsx('text-3xl', textColor)}
+            text={value.toFixed(2)}
           >
             {formatLargeNumber(value)}
-          </div>
+          </Tooltip>
           <div className={clsx('text-base', textColor)}>expected</div>
         </>
       )}

web/components/datetime-tooltip.tsx

@@ -1,9 +1,8 @@
-import React from 'react'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
 import timezone from 'dayjs/plugin/timezone'
 import advanced from 'dayjs/plugin/advancedFormat'
-import { ClientRender } from './client-render'
+import { Tooltip } from './tooltip'
 
 dayjs.extend(utc)
 dayjs.extend(timezone)
@@ -19,17 +18,5 @@ export function DateTimeTooltip(props: {
   const formattedTime = dayjs(time).format('MMM DD, YYYY hh:mm a z')
   const toolTip = text ? `${text} ${formattedTime}` : formattedTime
 
-  return (
-    <>
-      <ClientRender>
-        <span
-          className="tooltip hidden cursor-default sm:inline-block"
-          data-tip={toolTip}
-        >
-          {props.children}
-        </span>
-      </ClientRender>
-      <span className="whitespace-nowrap sm:hidden">{props.children}</span>
-    </>
-  )
+  return <Tooltip text={toolTip}>{props.children}</Tooltip>
 }

web/components/info-tooltip.tsx

@@ -1,10 +1,11 @@
 import { InformationCircleIcon } from '@heroicons/react/outline'
+import { Tooltip } from './tooltip'
 
 export function InfoTooltip(props: { text: string }) {
   const { text } = props
   return (
-    <div className="tooltip" data-tip={text}>
+    <Tooltip text={text}>
       <InformationCircleIcon className="h-5 w-5 text-gray-500" />
-    </div>
+    </Tooltip>
   )
 }

web/components/outcome-label.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx'
-import { ReactNode } from 'react'
 import { Answer } from 'common/answer'
 import { getProbability } from 'common/calculate'
 import { getValueFromBucket } from 'common/calculate-dpm'
@@ -11,7 +10,7 @@ import {
   resolution,
 } from 'common/contract'
 import { formatLargeNumber, formatPercent } from 'common/util/format'
-import { ClientRender } from './client-render'
+import { Tooltip } from './tooltip'
 
 export function OutcomeLabel(props: {
   contract: Contract
@@ -91,13 +90,13 @@ export function FreeResponseOutcomeLabel(props: {
   const chosen = contract.answers?.find((answer) => answer.id === resolution)
   if (!chosen) return <AnswerNumberLabel number={resolution} />
   return (
-    <FreeResponseAnswerToolTip text={chosen.text}>
+    <Tooltip text={chosen.text}>
       <AnswerLabel
         answer={chosen}
         truncate={truncate}
         className={answerClassName}
       />
-    </FreeResponseAnswerToolTip>
+    </Tooltip>
   )
 }
 
@@ -174,23 +173,3 @@ export function AnswerLabel(props: {
     </span>
   )
 }
-
-function FreeResponseAnswerToolTip(props: {
-  text: string
-  children?: ReactNode
-}) {
-  const { text } = props
-  return (
-    <>
-      <ClientRender>
-        <span
-          className="tooltip hidden cursor-default sm:inline-block"
-          data-tip={text}
-        >
-          {props.children}
-        </span>
-      </ClientRender>
-      <span className="whitespace-nowrap sm:hidden">{props.children}</span>
-    </>
-  )
-}