Add tooltip on answer to FR comments

web/components/outcome-label.tsx

@@ -1,4 +1,3 @@
-import clsx from 'clsx'
 import { Answer } from '../../common/answer'
 import { getProbability } from '../../common/calculate'
 import {
@@ -11,6 +10,7 @@ import {
   FullContract,
 } from '../../common/contract'
 import { formatPercent } from '../../common/util/format'
+import { ClientRender } from './client-render'
 
 export function OutcomeLabel(props: {
   contract: Contract
@@ -72,11 +72,13 @@ export function FreeResponseOutcomeLabel(props: {
   const chosen = answers?.find((answer) => answer.id === resolution)
   if (!chosen) return <AnswerNumberLabel number={resolution} />
   return (
-    <AnswerLabel
-      answer={chosen}
-      truncate={truncate}
-      className={answerClassName}
-    />
+    <FreeResponseAnswerToolTip text={chosen.text}>
+      <AnswerLabel
+        answer={chosen}
+        truncate={truncate}
+        className={answerClassName}
+      />
+    </FreeResponseAnswerToolTip>
   )
 }
 
@@ -126,3 +128,23 @@ export function AnswerLabel(props: {
 
   return <span className={className}>{truncated}</span>
 }
+
+function FreeResponseAnswerToolTip(props: {
+  text: string
+  children?: React.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>
+    </>
+  )
+}