From cc0833f7ac5317d7cb50430f0d66808735a8ce5a Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Fri, 23 Apr 2021 11:38:52 -0700
Subject: [PATCH] Add explainer info to /support/petAppearances

---
 src/app/SupportPetAppearancesPage.js | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/app/SupportPetAppearancesPage.js b/src/app/SupportPetAppearancesPage.js
index a73ee21..0202679 100644
--- a/src/app/SupportPetAppearancesPage.js
+++ b/src/app/SupportPetAppearancesPage.js
@@ -1,5 +1,14 @@
 import { gql, useQuery } from "@apollo/client";
+import { QuestionIcon } from "@chakra-ui/icons";
 import { Box, Flex, Wrap, WrapItem } from "@chakra-ui/layout";
+import {
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+} from "@chakra-ui/popover";
+import { Tooltip } from "@chakra-ui/tooltip";
 import { Link } from "react-router-dom";
 import HangerSpinner from "./components/HangerSpinner";
 import {
@@ -30,8 +39,21 @@ function UnlabeledPetAppearancesList() {
   return (
     <Box>
       <Box as="p" marginBottom="2">
-        These pet appearances have some <code>UNKNOWN</code> poses that need
-        labeled! Please take a look!
+        These species/color combinations have some <code>UNKNOWN</code>{" "}
+        appearances that need labeled! Please take a look!
+        <Popover trigger="hover" placement="top">
+          <PopoverTrigger>
+            <QuestionIcon marginLeft="1.5" marginTop="-2px" tabIndex="0" />
+          </PopoverTrigger>
+          <PopoverContent>
+            <PopoverArrow />
+            <PopoverBody fontSize="sm" textAlign="center">
+              This includes species/color combinations that have at least one{" "}
+              <code>UNKNOWN</code> pose, and are missing at least one of the
+              standard 6 mood/gender-presentation poses.
+            </PopoverBody>
+          </PopoverContent>
+        </Popover>
       </Box>
       {loading && (
         <Flex justify="center">