Improvement/Tooltips on question type

Author: monu-simon

locales/en/common.json

@@ -30,5 +30,12 @@
     "title": "Display options",
     "OneQuestionPerStep": "One question per step",
     "DisplayTitle": "Display title"
+  },
+  "questionType": {
+    "question": "Question",
+    "emoji": "Emoji",
+    "input": "Input",
+    "choice": "Choice",
+    "rate": "Rate"
   }
 }

package-lock.json

@@ -39,6 +39,7 @@
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.2.0",
+    "react-tooltip": "^5.25.1",
     "recharts": "^2.4.3",
     "sass": "^1.52.1",
     "typescript": "^5.0.2",

package.json

@@ -77,7 +77,7 @@ export default function QuestionBlockWrapper({
           </button>
 
           <div className="hidden sm:block">
-            <QuestionTypeIcons type={questionData.type} />
+            <QuestionTypeIcons type={questionData.type} index={index} />
           </div>
 
           <div className="w-full grow">
@@ -97,7 +97,7 @@ export default function QuestionBlockWrapper({
 
         <div className="mb-2 flex w-full items-center justify-end gap-2 sm:mb-0 sm:w-auto">
           <div className="mr-1 sm:hidden">
-            <QuestionTypeIcons type={questionData.type} />
+            <QuestionTypeIcons type={questionData.type} index={index} />
           </div>
 
           {(isDraggingPossible || isRemovingPossible) && (

src/features/surveys/features/SurveyCreator/components/QuestionBlocks/QuestionBlockWrapper/QuestionBlockWrapper.tsx

@@ -4,18 +4,41 @@ import ChoiceIcon from 'shared/components/QuestionTypeIcons/ChoiceIcon';
 import EmojiIcon from 'shared/components/QuestionTypeIcons/EmojiIcon';
 import InputIcon from 'shared/components/QuestionTypeIcons/InputIcon';
 import RateIcon from 'shared/components/QuestionTypeIcons/RateIcon';
+import { Tooltip } from 'react-tooltip';
+import useTranslation from 'next-translate/useTranslation';
 
 interface QuestionTypeIconsProps {
+  index: number;
   type: QuestionType;
 }
 
-export default function QuestionTypeIcons({ type }: QuestionTypeIconsProps) {
+export default function QuestionTypeIcons({
+  type,
+  index,
+}: QuestionTypeIconsProps) {
+  const { t } = useTranslation('common');
+
   return (
-    <div className="mx-1 flex h-[42px] w-[26px] items-center justify-center px-[1px] text-gray-400">
-      {type === QuestionType.EMOJI && <EmojiIcon />}
-      {type === QuestionType.INPUT && <InputIcon />}
-      {type === QuestionType.CHOICE && <ChoiceIcon />}
-      {type === QuestionType.RATE && <RateIcon />}
-    </div>
+    <>
+      <Tooltip
+        className="z-10"
+        id={`my-tooltip-${index}`}
+        place="bottom"
+        positionStrategy="fixed"
+      >
+        {`${t(`questionType.${type.toLowerCase()}`)} ${t(
+          'questionType.question'
+        )}`}
+      </Tooltip>
+      <div
+        className="mx-1 flex h-[42px] w-[26px] items-center justify-center px-[1px] text-gray-400"
+        data-tooltip-id={`my-tooltip-${index}`}
+      >
+        {type === QuestionType.EMOJI && <EmojiIcon />}
+        {type === QuestionType.INPUT && <InputIcon />}
+        {type === QuestionType.CHOICE && <ChoiceIcon />}
+        {type === QuestionType.RATE && <RateIcon />}
+      </div>
+    </>
   );
 }