From 4f506fcb6daf63e6834055d18c8cdbae1b14fdaa Mon Sep 17 00:00:00 2001
From: Lucas Connors <lucas.revolutiontech@gmail.com>
Date: Sat, 6 Aug 2022 12:13:05 -0700
Subject: [PATCH] fix: show tooltips when hovering over hints

Once we switched to SVGR the existing tooltip children were incompatible and needed to leverage forwardRef. However, wrapping these in <span> is a much simpler workaround.
---
 src/client/display/NonPlayerDisplay.tsx |  4 +++-
 src/client/display/PlayerHints.tsx      | 12 +++++++++---
 src/client/display/TeamDisplay.tsx      |  8 ++++++--
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/client/display/NonPlayerDisplay.tsx b/src/client/display/NonPlayerDisplay.tsx
index fc9b4d8..abe720f 100644
--- a/src/client/display/NonPlayerDisplay.tsx
+++ b/src/client/display/NonPlayerDisplay.tsx
@@ -36,7 +36,9 @@ export const NonPlayerDisplay = (props: Props) => {
                 title="This hint becomes available once this non-player pile is exhausted."
                 PopperProps={{ disablePortal: true }}
               >
-                <LockedHint style={HINT_STYLES} />
+                <span>
+                  <LockedHint style={HINT_STYLES} />
+                </span>
               </Tooltip>
             </Hints>
           )}
diff --git a/src/client/display/PlayerHints.tsx b/src/client/display/PlayerHints.tsx
index a284673..395a4a7 100644
--- a/src/client/display/PlayerHints.tsx
+++ b/src/client/display/PlayerHints.tsx
@@ -29,7 +29,9 @@ export const PlayerHints = (props: Props) => {
           title={`This hint was used by ${playerName}.`}
           PopperProps={{ disablePortal: true }}
         >
-          <UsedHint style={HINT_STYLES} />
+          <span>
+            <UsedHint style={HINT_STYLES} />
+          </span>
         </Tooltip>
       ))}
       {_.range(hintsUnused).map((_, i) => (
@@ -38,7 +40,9 @@ export const PlayerHints = (props: Props) => {
           title={`This hint is available only to ${playerName}.`}
           PopperProps={{ disablePortal: true }}
         >
-          <UnusedHint style={HINT_STYLES} />
+          <span>
+            <UnusedHint style={HINT_STYLES} />
+          </span>
         </Tooltip>
       ))}
       {hintsUnused === 0 && teamHintsAvailable > 0 && (
@@ -46,7 +50,9 @@ export const PlayerHints = (props: Props) => {
           title={`${playerName} can still give a clue by using one of the team's shared hints.`}
           PopperProps={{ disablePortal: true }}
         >
-          <AvailableHint style={HINT_STYLES} />
+          <span>
+            <AvailableHint style={HINT_STYLES} />
+          </span>
         </Tooltip>
       )}
     </Hints>
diff --git a/src/client/display/TeamDisplay.tsx b/src/client/display/TeamDisplay.tsx
index 10a7069..868d339 100644
--- a/src/client/display/TeamDisplay.tsx
+++ b/src/client/display/TeamDisplay.tsx
@@ -48,7 +48,9 @@ export const TeamDisplay = (props: Props) => {
               title="This hint is available to players that have used all of their own hints."
               PopperProps={{ disablePortal: true }}
             >
-              <UnusedHint style={HINT_STYLES} />
+              <span>
+                <UnusedHint style={HINT_STYLES} />
+              </span>
             </Tooltip>
           ))}
           {_.range(hints.locked).map((_, i) => (
@@ -57,7 +59,9 @@ export const TeamDisplay = (props: Props) => {
               title="This hint becomes available once every player uses all of their own hints."
               PopperProps={{ disablePortal: true }}
             >
-              <LockedHint style={HINT_STYLES} />
+              <span>
+                <LockedHint style={HINT_STYLES} />
+              </span>
             </Tooltip>
           ))}
         </Hints>