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.
RevolutionTech · Aug 6, 2022 · 4f506fc · 4f506fc
1 parent 156c1cd
commit 4f506fc
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git 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
@@ -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,15 +40,19 @@ 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 && (
         <Tooltip
           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
@@ -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>