fix: info icons tooltip

src/pages/Questions/DropDown/settingDropDown.tsx

@@ -1,5 +1,11 @@
 import { useParams } from "react-router-dom";
-import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
+import {
+  Box,
+  Typography,
+  Tooltip,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import CustomTextField from "@ui_kit/CustomTextField";
 import { useDebouncedCallback } from "use-debounce";
@@ -38,6 +44,7 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
         sx={{
           position: "relative",
           display: "flex",
+          gap: "20px",
           width: "100%",
           justifyContent: "space-between",
           flexDirection: isMobile ? "column" : null,
@@ -56,7 +63,12 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
           }}
         >
           <Typography
-            sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}
+            sx={{
+              height: isMobile ? "18px" : "auto",
+              fontWeight: "500",
+              fontSize: "18px",
+              color: " #4D4D4D",
+            }}
           >
             Настройки ответов
           </Typography>
@@ -72,7 +84,12 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
               })
             }
           />
-          <Box sx={{ display: isMobile ? "none" : "block", mt: isMobile ? "11px" : "6px" }}>
+          <Box
+            sx={{
+              display: isMobile ? "none" : "block",
+              mt: isMobile ? "11px" : "6px",
+            }}
+          >
             <Typography
               sx={{
                 height: isMobile ? "18px" : "auto",
@@ -104,7 +121,12 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
           }}
         >
           <Typography
-            sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}
+            sx={{
+              height: isMobile ? "18px" : "auto",
+              fontWeight: "500",
+              fontSize: "18px",
+              color: " #4D4D4D",
+            }}
           >
             Настройки вопросов
           </Typography>
@@ -117,7 +139,9 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
               });
             }}
           />
-          <Box sx={{ position: "relative", display: "flex", alignItems: "center" }}>
+          <Box
+            sx={{ position: "relative", display: "flex", alignItems: "center" }}
+          >
             <CustomCheckbox
               label={"Внутреннее название вопроса"}
               checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
@@ -134,13 +158,14 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
                 });
               }}
             />
-            <InfoIcon
+            <Tooltip
-              sx={{
+              title="Будет отображаться как заголовок вопроса в приходящих заявках."
-                position: isMobile ? "absolute" : null,
+              placement="top"
-                display: "block",
+            >
-                right: isMobile ? "30px" : null,
+              <Box>
-              }}
+                <InfoIcon />
-            />
+              </Box>
+            </Tooltip>
           </Box>
           <Box
             sx={{

src/pages/Questions/UploadFile/UploadFile.tsx

@@ -7,6 +7,7 @@ import {
   Select,
   SelectChangeEvent,
   Typography,
+  Tooltip,
   useMediaQuery,
   useTheme,
 } from "@mui/material";
@@ -166,8 +167,12 @@ export default function UploadFile({ totalIndex }: Props) {
           >
             Пользователь может загрузить любой собственный файл
           </Typography>
+          <Tooltip title="Можно загрузить файл в желаемом формате." placement="top">
+            <Box>
               <InfoIcon />
             </Box>
+          </Tooltip>
+        </Box>
       </Box>
       <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
       <SwitchUpload switchState={switchState} totalIndex={totalIndex} />

src/pages/Questions/branchingQuestions.tsx

@@ -11,10 +11,15 @@ import {
   Modal,
   Radio,
   RadioGroup,
+  Tooltip,
   Typography,
   useTheme,
 } from "@mui/material";
-import { questionStore, resetSomeField, updateQuestionsList } from "@root/questions";
+import {
+  questionStore,
+  resetSomeField,
+  updateQuestionsList,
+} from "@root/questions";
 import { Select } from "./Select";
 
 import RadioCheck from "@ui_kit/RadioCheck";
@@ -29,15 +34,22 @@ type BranchingQuestionsProps = {
 const ACTIONS = ["Показать", "Скрыть"];
 const STIPULATIONS = ["Условие 1", "Условие 2", "Условие 3"];
 const ANSWERS = ["Ответ 1", "Ответ 2", "Ответ 3"];
-const CONDITIONS = ["Все условия обязательны", "Обязательно хотя бы одно условие"];
+const CONDITIONS = [
+  "Все условия обязательны",
+  "Обязательно хотя бы одно условие",
+];
 
-export default function BranchingQuestions({ totalIndex }: BranchingQuestionsProps) {
+export default function BranchingQuestions({
+  totalIndex,
+}: BranchingQuestionsProps) {
   const theme = useTheme();
   const [titleInputWidth, setTitleInputWidth] = useState<number>(0);
   const quizId = Number(useParams().quizId);
   const { openedModalSettings, listQuestions } = questionStore();
   const titleRef = useRef<HTMLDivElement>(null);
-  const [title, setTitle] = useState<string>(listQuestions[quizId][totalIndex].title)
+  const [title, setTitle] = useState<string>(
+    listQuestions[quizId][totalIndex].title
+  );
 
   useEffect(() => {
     setTitleInputWidth(titleRef.current?.offsetWidth || 0);
@@ -74,9 +86,10 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
             sx={{
               boxSizing: "border-box",
               background: "#F2F3F7",
-              padding: "25px",
               height: "70px",
+              padding: "0 25px",
               display: "flex",
+              alignItems: "center",
             }}
           >
             <Box sx={{ color: "#9A9AAF" }}>
@@ -113,7 +126,14 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
               </Box>
               <Typography component="span">)</Typography>
             </Box>
-            <InfoIcon width={24} height={24} />
+            <Tooltip
+              title="Настройте условия, при которых данный вопрос будет отображаться в квизе."
+              placement="top"
+            >
+              <Box>
+                <InfoIcon />
+              </Box>
+            </Tooltip>
           </Box>
           <Box
             sx={{
@@ -132,7 +152,9 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
             >
               <Select
                 items={ACTIONS}
-                activeItemIndex={listQuestions[quizId][totalIndex].content.rule.show ? 0 : 1}
+                activeItemIndex={
+                  listQuestions[quizId][totalIndex].content.rule.show ? 0 : 1
+                }
                 sx={{ maxWidth: "140px" }}
                 onChange={(action) => {
                   const clonContent = listQuestions[quizId][totalIndex].content;
@@ -142,9 +164,12 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
                   });
                 }}
               />
-              <Typography sx={{ color: theme.palette.grey2.main }}>если в ответе на вопрос</Typography>
+              <Typography sx={{ color: theme.palette.grey2.main }}>
+                если в ответе на вопрос
+              </Typography>
             </Box>
-            {listQuestions[quizId][totalIndex].content.rule.reqs.map((request, index) => (
+            {listQuestions[quizId][totalIndex].content.rule.reqs.map(
+              (request, index) => (
                 <Box
                   key={index}
                   sx={{
@@ -162,11 +187,14 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
                       pb: "5px",
                     }}
                   >
-                  <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>Условие 1</Typography>
+                    <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
+                      Условие 1
+                    </Typography>
                     <IconButton
                       sx={{ borderRadius: "6px", padding: "2px" }}
                       onClick={() => {
-                      const clonContent = listQuestions[quizId][totalIndex].content;
+                        const clonContent =
+                          listQuestions[quizId][totalIndex].content;
 
                         clonContent.rule.reqs.splice(index, 1);
                         updateQuestionsList(quizId, totalIndex, {
@@ -182,10 +210,15 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
                     activeItemIndex={request.id ? Number(request.id) : -1}
                     items={STIPULATIONS}
                     onChange={(stipulation) => {
-                    const clonContent = listQuestions[quizId][totalIndex].content;
+                      const clonContent =
+                        listQuestions[quizId][totalIndex].content;
 
                       clonContent.rule.reqs[index] = {
-                      id: String(STIPULATIONS.findIndex((item) => item.includes(stipulation))),
+                        id: String(
+                          STIPULATIONS.findIndex((item) =>
+                            item.includes(stipulation)
+                          )
+                        ),
                         vars: request.vars,
                       };
 
@@ -204,7 +237,11 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
                           pb: "10px",
                         }}
                       >
-                      <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>Дан ответ</Typography>
+                        <Typography
+                          sx={{ color: "#4D4D4D", fontWeight: "500" }}
+                        >
+                          Дан ответ
+                        </Typography>
                         <Typography sx={{ color: "#7E2AEA", pl: "10px" }}>
                           (Укажите один или несколько вариантов)
                         </Typography>
@@ -214,11 +251,20 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
                         activeItemIndex={-1}
                         items={ANSWERS}
                         onChange={(answer) => {
-                        const clonContent = listQuestions[quizId][totalIndex].content;
+                          const clonContent =
-                        const answerItemIndex = ANSWERS.findIndex((answerItem) => answerItem === answer);
+                            listQuestions[quizId][totalIndex].content;
+                          const answerItemIndex = ANSWERS.findIndex(
+                            (answerItem) => answerItem === answer
+                          );
 
-                        if (!clonContent.rule.reqs[index].vars.includes(answerItemIndex)) {
+                          if (
-                          listQuestions[quizId][totalIndex].content.rule.reqs[index].vars.push(answerItemIndex);
+                            !clonContent.rule.reqs[index].vars.includes(
+                              answerItemIndex
+                            )
+                          ) {
+                            listQuestions[quizId][totalIndex].content.rule.reqs[
+                              index
+                            ].vars.push(answerItemIndex);
                           }
 
                           updateQuestionsList(quizId, totalIndex, {
@@ -238,18 +284,24 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
                           gap: "10px",
                         }}
                       >
-                      {listQuestions[quizId][totalIndex].content.rule.reqs[index].vars.map((item, varIndex) => (
+                        {listQuestions[quizId][totalIndex].content.rule.reqs[
+                          index
+                        ].vars.map((item, varIndex) => (
                           <Chip
                             key={varIndex}
                             label={ANSWERS[item]}
                             variant="outlined"
                             onDelete={() => {
-                            const clonContent = listQuestions[quizId][totalIndex].content;
+                              const clonContent =
-                            const removedItemIndex = clonContent.rule.reqs[index].vars.findIndex(
+                                listQuestions[quizId][totalIndex].content;
-                              (varItem) => varItem === item
+                              const removedItemIndex = clonContent.rule.reqs[
-                            );
+                                index
+                              ].vars.findIndex((varItem) => varItem === item);
 
-                            clonContent.rule.reqs[index].vars.splice(removedItemIndex, 1);
+                              clonContent.rule.reqs[index].vars.splice(
+                                removedItemIndex,
+                                1
+                              );
 
                               updateQuestionsList(quizId, totalIndex, {
                                 content: clonContent,
@@ -261,7 +313,8 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
                     </>
                   )}
                 </Box>
-            ))}
+              )
+            )}
             <Box
               sx={{
                 display: "flex",
@@ -288,9 +341,12 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
               <FormControl>
                 <RadioGroup
                   aria-labelledby="demo-controlled-radio-buttons-group"
-                  value={listQuestions[quizId][totalIndex].content.rule.or ? 1 : 0}
+                  value={
+                    listQuestions[quizId][totalIndex].content.rule.or ? 1 : 0
+                  }
                   onChange={(_, value) => {
-                    const clonContent = listQuestions[quizId][totalIndex].content;
+                    const clonContent =
+                      listQuestions[quizId][totalIndex].content;
                     clonContent.rule.or = Boolean(Number(value));
                     updateQuestionsList(quizId, totalIndex, {
                       content: clonContent,
@@ -302,7 +358,12 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
                       key={index}
                       sx={{ color: theme.palette.grey2.main }}
                       value={index}
-                      control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
+                      control={
+                        <Radio
+                          checkedIcon={<RadioCheck />}
+                          icon={<RadioIcon />}
+                        />
+                      }
                       label={condition}
                     />
                   ))}
@@ -310,10 +371,18 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
               </FormControl>
             </Box>
             <Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
-              <Button variant="outlined" onClick={handleClose} sx={{ width: "100%", maxWidth: "130px" }}>
+              <Button
+                variant="outlined"
+                onClick={handleClose}
+                sx={{ width: "100%", maxWidth: "130px" }}
+              >
                 Отмена
               </Button>
-              <Button variant="contained" sx={{ width: "100%", maxWidth: "130px" }} onClick={handleClose}>
+              <Button
+                variant="contained"
+                sx={{ width: "100%", maxWidth: "130px" }}
+                onClick={handleClose}
+              >
                 Готово
               </Button>
             </Box>