website: show descriptions for label flags

Desciptions are shown both via tooltips, which are easier to read on desktop browsers, and via an explain (i) button so that mobile users can get the description (though in one larger list).

website/src/components/Messages/LabelFlagGroup.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex } from "@chakra-ui/react";
+import { Button, Flex, Tooltip } from "@chakra-ui/react";
 import { useTranslation } from "next-i18next";
 import { getTypeSafei18nKey } from "src/lib/i18n";
 
@@ -14,18 +14,19 @@ export const LabelFlagGroup = ({ values, labelNames, isEditable = true, onChange
   return (
     <Flex wrap="wrap" gap="4">
       {labelNames.map((name, idx) => (
-        <Button
-          key={name}
-          onClick={() => {
-            const newValues = values.slice();
-            newValues[idx] = newValues[idx] ? 0 : 1;
-            onChange(newValues);
-          }}
-          isDisabled={!isEditable}
-          colorScheme={values[idx] === 1 ? "blue" : undefined}
-        >
-          {t(getTypeSafei18nKey(name))}
-        </Button>
+        <Tooltip key={name} label={`${t(getTypeSafei18nKey(`${name}.explanation`))}`}>
+          <Button
+            onClick={() => {
+              const newValues = values.slice();
+              newValues[idx] = newValues[idx] ? 0 : 1;
+              onChange(newValues);
+            }}
+            isDisabled={!isEditable}
+            colorScheme={values[idx] === 1 ? "blue" : undefined}
+          >
+            {t(getTypeSafei18nKey(name))}
+          </Button>
+        </Tooltip>
       ))}
     </Flex>
   );

website/src/components/Messages/LabelInputGroup.tsx

@@ -1,10 +1,12 @@
 import { Text, VStack } from "@chakra-ui/react";
+import { useTranslation } from "next-i18next";
+import { Explain } from "src/components/Explain";
+import { LabelFlagGroup } from "src/components/Messages/LabelFlagGroup";
+import { LabelLikertGroup } from "src/components/Survey/LabelLikertGroup";
+import { LabelYesNoGroup } from "src/components/Messages/LabelYesNoGroup";
+import { getTypeSafei18nKey } from "src/lib/i18n";
 import { Label } from "src/types/Tasks";
 
-import { LabelLikertGroup } from "../Survey/LabelLikertGroup";
-import { LabelFlagGroup } from "./LabelFlagGroup";
-import { LabelYesNoGroup } from "./LabelYesNoGroup";
-
 export interface LabelInputInstructions {
   yesNoInstruction: string;
   flagInstruction: string;
@@ -28,6 +30,7 @@ export const LabelInputGroup = ({
   instructions,
   onChange,
 }: LabelInputGroupProps) => {
+  const { t } = useTranslation("labelling");
   const yesNoIndexes = labels.map((label, idx) => (label.widget === "yes_no" ? idx : null)).filter((v) => v !== null);
   const flagIndexes = labels.map((label, idx) => (label.widget === "flag" ? idx : null)).filter((v) => v !== null);
   const likertIndexes = labels.map((label, idx) => (label.widget === "likert" ? idx : null)).filter((v) => v !== null);
@@ -52,7 +55,17 @@ export const LabelInputGroup = ({
       )}
       {flagIndexes.length > 0 && (
         <VStack alignItems="stretch" spacing={2}>
-          <Text>{instructions.flagInstruction}</Text>
+          <Text>
+            {instructions.flagInstruction}
+            <Explain
+              explanation={flagIndexes.map(
+                (idx) =>
+                  `${t(getTypeSafei18nKey(labels[idx].name))}: ${t(
+                    getTypeSafei18nKey(`${labels[idx].name}.explanation`)
+                  )}`
+              )}
+            />{" "}
+          </Text>
           <LabelFlagGroup
             values={flagIndexes.map((idx) => values[idx])}
             labelNames={flagIndexes.map((idx) => labels[idx].name)}