app routes _index: use popover instead of tooltip

Unfortunately Radix tooltips do not work on mobile (no hover events). See discussion: radix-ui/primitives#955
cmnord · Mar 17, 2023 · c21e8b5 · c21e8b5
1 parent ed9957d
commit c21e8b5
Showing 1 changed file with 3 additions and 11 deletions.
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -20,9 +20,9 @@ import {
 } from "~/components/error";
 import GameCard from "~/components/game-card";
 import { QuestionMarkCircle } from "~/components/icons";
+import Popover from "~/components/popover";
 import Search from "~/components/search";
 import Toggle from "~/components/toggle";
-import Tooltip from "~/components/tooltip";
 import Upload from "~/components/upload";
 
 import { getAllGames } from "~/models/game.server";
@@ -132,22 +132,14 @@ export default function Index() {
             >
               Solo mode {optimisticSolo ? "on" : "off"}
             </p>
-            <Tooltip
-              content={
-                <span>
-                  In solo mode, no other players can join the game.
-                  <br />
-                  If you refresh the page the game will reset.
-                </span>
-              }
-            >
+            <Popover content="In solo mode, no other players can join the game. If you refresh the page the game will reset.">
               <button>
                 <QuestionMarkCircle
                   outlined
                   className="w-4 h-4 text-gray-400"
                 />
               </button>
-            </Tooltip>
+            </Popover>
           </div>
         </div>
       </Form>