From 5f5e7a63f555682251f27080d3c6d1e65227e1e9 Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Fri, 29 Apr 2022 10:45:43 -0600
Subject: [PATCH] Add tooltip on answer to FR comments

---
 web/components/outcome-label.tsx | 34 ++++++++++++++++++++++++++------
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/web/components/outcome-label.tsx b/web/components/outcome-label.tsx
index 0901dd4e..b2bc2f03 100644
--- a/web/components/outcome-label.tsx
+++ b/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>
+    </>
+  )
+}