feat: info icon tooltips

src/pages/InstallQuiz/InstallQuiz.tsx

@@ -15,6 +15,7 @@ import {
   SelectChangeEvent,
   TextField,
   Typography,
+  Tooltip,
   useTheme,
 } from "@mui/material";
 import Stepper from "@ui_kit/Stepper";
@@ -46,11 +47,27 @@ type BackgroundType = "text" | "video";
 
 export default function InstallQuiz() {
   const buttonInstall: { icon: string; title: string; text: string }[] = [
-    { icon: OnButton, title: "По кнопке", text: "Конструктор кнопки или собственная кнопка" },
+    {
+      icon: OnButton,
+      title: "По кнопке",
+      text: "Конструктор кнопки или собственная кнопка",
+    },
     { icon: Bunner, title: "Баннером", text: "Сбоку или на всю ширину экрана" },
-    { icon: InBidySite, title: "В тело сайта", text: "Задайте свои размеры и встройте в сайт" },
+    {
-    { icon: AutoOpen, title: "Автооткрытие", text: "Автооткрытие поп-ап на сайте" },
+      icon: InBidySite,
-    { icon: WidgetImg, title: "Виджет", text: "Сбоку страницы как консультант" },
+      title: "В тело сайта",
+      text: "Задайте свои размеры и встройте в сайт",
+    },
+    {
+      icon: AutoOpen,
+      title: "Автооткрытие",
+      text: "Автооткрытие поп-ап на сайте",
+    },
+    {
+      icon: WidgetImg,
+      title: "Виджет",
+      text: "Сбоку страницы как консультант",
+    },
   ];
 
   const [activeStep, setActiveStep] = React.useState(5);
@@ -97,8 +114,20 @@ export default function InstallQuiz() {
           }}
         >
           <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
-            <LinkIcon color={theme.palette.brightPurple.main} bgcolor={"#EEE4FC"} />
+            <LinkIcon
-            <Typography>Ссылка на квиз</Typography> <InfoIcon />
+              color={theme.palette.brightPurple.main}
+              bgcolor={"#EEE4FC"}
+            />
+            <Typography>Ссылка на квиз</Typography>
+
+            <Tooltip
+              title="Скопируйте или укажите свою ссылку на квиз. Ссылка должна быть от 4 до 20 символов включительно, может содержать латинские буквы, цифры, тире '-' и нижнее подчеркивание '_'."
+              placement="top"
+            >
+              <Box>
+                <InfoIcon />
+              </Box>
+            </Tooltip>
             <FormControl
               fullWidth
               size="small"
@@ -223,9 +252,19 @@ export default function InstallQuiz() {
                 }}
               />
             </FormControl>
-            <CopyIcon color={theme.palette.brightPurple.main} bgcolor={"#EEE4FC"} marL={"10px"} />
+            <CopyIcon
+              color={theme.palette.brightPurple.main}
+              bgcolor={"#EEE4FC"}
+              marL={"10px"}
+            />
           </Box>
-          <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+            }}
+          >
             <ButtonSocial />
 
             <Typography sx={{ color: "#FC712F" }}>Не опубликован</Typography>
@@ -245,11 +284,16 @@ export default function InstallQuiz() {
           }}
         >
           <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
-            <VkIcon color={theme.palette.brightPurple.main} bgcolor={"#EEE4FC"} />
+            <VkIcon
+              color={theme.palette.brightPurple.main}
+              bgcolor={"#EEE4FC"}
+            />
             <Typography> Вконтакте</Typography>
           </Box>
 
-          <Typography>Для публикации сниппета на стене группы, призывающего пройти тест.</Typography>
+          <Typography>
+            Для публикации сниппета на стене группы, призывающего пройти тест.
+          </Typography>
           <Link
             component="button"
             onClick={handleOpenVk}
@@ -278,10 +322,16 @@ export default function InstallQuiz() {
           }}
         >
           <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
-            <DomenIcon color={theme.palette.brightPurple.main} bgcolor={"#EEE4FC"} />
+            <DomenIcon
+              color={theme.palette.brightPurple.main}
+              bgcolor={"#EEE4FC"}
+            />
             <Typography>Свой домен</Typography>
           </Box>
-          <Typography>Подключите свой домен, если хотите, чтобы квиз открывался по вашей ссылке.</Typography>
+          <Typography>
+            Подключите свой домен, если хотите, чтобы квиз открывался по вашей
+            ссылке.
+          </Typography>
           <Link
             component="button"
             onClick={handleOpenDom}
@@ -338,7 +388,13 @@ export default function InstallQuiz() {
             >
               <img src={e.icon} />
               <Typography>{e.title}</Typography>
-              <Typography sx={{ fontSize: "16px", color: theme.palette.grey2.main, textAlign: "start" }}>
+              <Typography
+                sx={{
+                  fontSize: "16px",
+                  color: theme.palette.grey2.main,
+                  textAlign: "start",
+                }}
+              >
                 {e.text}
               </Typography>
             </ButtonBase>
@@ -351,8 +407,13 @@ export default function InstallQuiz() {
       <AutoOpenInstall />
       <VidjetInstall />
       <InstallQzCode />
-      <Box sx={{ display: "flex", gap: "8px", justifyContent: "end", mt: "30px" }}>
+      <Box
-        <Button variant="outlined" sx={{ padding: "10px 20px", borderRadius: "8px" }}>
+        sx={{ display: "flex", gap: "8px", justifyContent: "end", mt: "30px" }}
+      >
+        <Button
+          variant="outlined"
+          sx={{ padding: "10px 20px", borderRadius: "8px" }}
+        >
           <ArrowLeft />
         </Button>
         <Button variant="contained">Запустить рекламу</Button>
@@ -387,7 +448,9 @@ export default function InstallQuiz() {
               background: theme.palette.background.default,
             }}
           >
-            <Typography sx={{ color: theme.palette.grey2.main }}>Добавить квиз в группу ВК</Typography>
+            <Typography sx={{ color: theme.palette.grey2.main }}>
+              Добавить квиз в группу ВК
+            </Typography>
           </Box>
           <Box
             sx={{
@@ -408,19 +471,31 @@ export default function InstallQuiz() {
               <Typography>1. Добавьте приложение в сообщество</Typography>
               <Button
                 variant="contained"
-                sx={{ maxWidth: "275px", display: "flex", gap: "10px", padding: "13px 15px" }}
+                sx={{
+                  maxWidth: "275px",
+                  display: "flex",
+                  gap: "10px",
+                  padding: "13px 15px",
+                }}
               >
                 {" "}
                 <VkIconButton />
                 Добавить приложение
               </Button>
               <Typography sx={{ color: theme.palette.grey2.main }}>
-                Для публикации сниппета на стене, призывающего пройти тест, вставьте в новую запись ссылку на приложение
+                Для публикации сниппета на стене, призывающего пройти тест,
+                вставьте в новую запись ссылку на приложение
               </Typography>
-              <CustomTextField placeholder={""} text={"https://vk.com/app6656524_-XXXXXXXXXXX"} />
+              <CustomTextField
-              <Typography sx={{ fontSize: "14px", color: theme.palette.grey2.main }}>
+                placeholder={""}
-                где XXXXXXXXXXX - id вашего сообщества (полный адрес ссылки можно узнать в браузерной строке, открыв
+                text={"https://vk.com/app6656524_-XXXXXXXXXXX"}
-                приложение в вашей группе
+              />
+              <Typography
+                sx={{ fontSize: "14px", color: theme.palette.grey2.main }}
+              >
+                где XXXXXXXXXXX - id вашего сообщества (полный адрес ссылки
+                можно узнать в браузерной строке, открыв приложение в вашей
+                группе
               </Typography>
             </Box>
 
@@ -431,13 +506,24 @@ export default function InstallQuiz() {
                 flexDirection: "column",
               }}
             >
-              <Typography>2. Откройте квиз в группе (вы должны быть администратором группы)</Typography>
+              <Typography>
-              <Typography sx={{ fontSize: "14px", color: theme.palette.grey2.main }}>
+                2. Откройте квиз в группе (вы должны быть администратором
-                Справа снизу нажмите на значок "редактировать" В появившемся окне введите id квиза и нажмите
+                группы)
-                "Привязать". Готово! Квиз привязан к группе
               </Typography>
-              <Typography sx={{ color: theme.palette.grey2.main }}>ID этого квиза</Typography>
+              <Typography
-              <CustomTextField placeholder={""} text={"639727c5177be5004f11a0f2"} />
+                sx={{ fontSize: "14px", color: theme.palette.grey2.main }}
+              >
+                Справа снизу нажмите на значок "редактировать" В появившемся
+                окне введите id квиза и нажмите "Привязать". Готово! Квиз
+                привязан к группе
+              </Typography>
+              <Typography sx={{ color: theme.palette.grey2.main }}>
+                ID этого квиза
+              </Typography>
+              <CustomTextField
+                placeholder={""}
+                text={"639727c5177be5004f11a0f2"}
+              />
             </Box>
 
             <Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
@@ -479,7 +565,9 @@ export default function InstallQuiz() {
               background: theme.palette.background.default,
             }}
           >
-            <Typography sx={{ color: theme.palette.grey2.main }}>Подключить свой домен</Typography>
+            <Typography sx={{ color: theme.palette.grey2.main }}>
+              Подключить свой домен
+            </Typography>
           </Box>
           <Box
             sx={{
@@ -497,14 +585,21 @@ export default function InstallQuiz() {
               }}
             >
               <Typography sx={{ color: theme.palette.grey2.main }}>
-                Подключите домен к проекту, чтобы создать несколько квизов на одном домене
+                Подключите домен к проекту, чтобы создать несколько квизов на
+                одном домене
               </Typography>
               <Typography>1. Настройте записи в регистраторе домена</Typography>
               <Box sx={{ display: "flex" }}>
-                <SelectableButton isSelected={backgroundType === "text"} onClick={() => setBackgroundType("text")}>
+                <SelectableButton
+                  isSelected={backgroundType === "text"}
+                  onClick={() => setBackgroundType("text")}
+                >
                   Для поддоменов
                 </SelectableButton>
-                <SelectableButton isSelected={backgroundType === "video"} onClick={() => setBackgroundType("video")}>
+                <SelectableButton
+                  isSelected={backgroundType === "video"}
+                  onClick={() => setBackgroundType("video")}
+                >
                   Для доменов
                 </SelectableButton>
               </Box>
@@ -538,7 +633,8 @@ export default function InstallQuiz() {
                   maxWidth: "372px",
                 }}
               >
-                Как подключить свой домен/поддомен к квизу? Ошибки при подключении домена
+                Как подключить свой домен/поддомен к квизу? Ошибки при
+                подключении домена
               </Link>
             </Box>
 
@@ -569,7 +665,10 @@ export default function InstallQuiz() {
                         // onMouseDown={}
                         edge="end"
                       >
-                        <CopyIcon color={"#ffffff"} bgcolor={theme.palette.brightPurple.main} />
+                        <CopyIcon
+                          color={"#ffffff"}
+                          bgcolor={theme.palette.brightPurple.main}
+                        />
                       </IconButton>
                     </InputAdornment>
                   }
@@ -579,8 +678,11 @@ export default function InstallQuiz() {
             </Box>
 
             <Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
-              <Typography sx={{ fontSize: "14px", color: theme.palette.grey2.main }}>
+              <Typography
-                Привязка домена и обновление DNS записей может занять до 48 часов
+                sx={{ fontSize: "14px", color: theme.palette.grey2.main }}
+              >
+                Привязка домена и обновление DNS записей может занять до 48
+                часов
               </Typography>
               <Button variant="outlined" onClick={handleCloseDom}>
                 Отмена

src/pages/Questions/DataOptions/DataOptions.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 ButtonsOptions from "../ButtonsOptions";
 import SwitchData from "./switchData";
 import { useState, useEffect } from "react";
@@ -44,7 +50,9 @@ export default function DataOptions({ totalIndex }: Props) {
       >
         <Box sx={{ gap: "10px", display: "flex", flexWrap: "wrap" }}>
           <SelectableButton
-            isSelected={listQuestions[quizId][totalIndex].content.type === "calendar"}
+            isSelected={
+              listQuestions[quizId][totalIndex].content.type === "calendar"
+            }
             onClick={() => {
               const clonContent = listQuestions[quizId][totalIndex].content;
               clonContent.type = "calendar";
@@ -55,7 +63,9 @@ export default function DataOptions({ totalIndex }: Props) {
             Использовать календарь
           </SelectableButton>
           <SelectableButton
-            isSelected={listQuestions[quizId][totalIndex].content.type === "mask"}
+            isSelected={
+              listQuestions[quizId][totalIndex].content.type === "mask"
+            }
             onClick={() => {
               const clonContent = listQuestions[quizId][totalIndex].content;
               clonContent.type = "mask";
@@ -77,10 +87,18 @@ export default function DataOptions({ totalIndex }: Props) {
           >
             Пользователю будет предложено выбрать дату
           </Typography>
-          <InfoIcon />
+          <Tooltip title="Выбор даты." placement="top">
+            <Box>
+              <InfoIcon />
+            </Box>
+          </Tooltip>
         </Box>
       </Box>
-      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
+      <ButtonsOptions
+        switchState={switchState}
+        SSHC={SSHC}
+        totalIndex={totalIndex}
+      />
       <SwitchData switchState={switchState} totalIndex={totalIndex} />
     </>
   );

src/pages/Questions/DataOptions/settingData.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 InfoIcon from "../../../assets/icons/InfoIcon";
@@ -16,7 +22,13 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
   const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
 
   return (
-    <Box sx={{ display: "flex", justifyContent: "space-between", flexDirection: isWrappColumn ? "column" : null }}>
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "space-between",
+        flexDirection: isWrappColumn ? "column" : null,
+      }}
+    >
       <Box sx={{ padding: "20px" }}>
         <Typography>Настройки календаря</Typography>
         <CustomCheckbox
@@ -41,7 +53,9 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
       </Box>
       <Box
         sx={{
-          padding: isWrappColumn ? "0px 20px 20px 20px " : "20px 20px 20px 20px",
+          padding: isWrappColumn
+            ? "0px 20px 20px 20px "
+            : "20px 20px 20px 20px",
           minWidth: isWrappColumn ? null : "350px",
           marginRight: "30px",
         }}
@@ -70,8 +84,15 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
 
               updateQuestionsList(quizId, totalIndex, { content: clonContent });
             }}
-          />{" "}
+          />
-          <InfoIcon />
+          <Tooltip
+            title="Будет отображаться как заголовок вопроса в приходящих заявках."
+            placement="top"
+          >
+            <Box>
+              <InfoIcon />
+            </Box>
+          </Tooltip>
         </Box>
         {listQuestions[quizId][totalIndex].content.innerNameCheck && (
           <CustomTextField

src/pages/Questions/Emoji/settingEmoji.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 InfoIcon from "../../../assets/icons/InfoIcon";
@@ -17,7 +23,13 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
   const isMobile = useMediaQuery(theme.breakpoints.down(790));
 
   return (
-    <Box sx={{ display: "flex", justifyContent: "space-between", flexDirection: isWrappColumn ? "column" : null }}>
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "space-between",
+        flexDirection: isWrappColumn ? "column" : null,
+      }}
+    >
       <Box sx={{ padding: "20px" }}>
         <Typography>Настройки ответов</Typography>
         <CustomCheckbox
@@ -41,7 +53,9 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
       </Box>
       <Box
         sx={{
-          padding: isWrappColumn ? "0px 20px 20px 20px " : "20px 20px 20px 20px ",
+          padding: isWrappColumn
+            ? "0px 20px 20px 20px "
+            : "20px 20px 20px 20px ",
           minWidth: isWrappColumn ? null : "350px",
           marginRight: "30px",
         }}
@@ -70,8 +84,15 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
 
               updateQuestionsList(quizId, totalIndex, { content: clonContent });
             }}
-          />{" "}
+          />
-          <InfoIcon />
+          <Tooltip
+            title="Будет отображаться как заголовок вопроса в приходящих заявках."
+            placement="top"
+          >
+            <Box>
+              <InfoIcon />
+            </Box>
+          </Tooltip>
         </Box>
         {listQuestions[quizId][totalIndex].content.innerNameCheck && (
           <CustomTextField

src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.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 InfoIcon from "../../../assets/icons/InfoIcon";
@@ -104,7 +110,14 @@ export default function SettingOptionsAndPict({
                 });
               }}
             />
-            <InfoIcon />
+            <Tooltip
+              title="Будет отображаться как заголовок вопроса в приходящих заявках."
+              placement="top"
+            >
+              <Box>
+                <InfoIcon />
+              </Box>
+            </Tooltip>
           </Box>
           {listQuestions[quizId][totalIndex].content.innerNameCheck && (
             <CustomTextField

src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx

@@ -1,6 +1,13 @@
 import { useEffect } from "react";
 import { useParams } from "react-router-dom";
-import { Box, Button, Typography, useMediaQuery, useTheme } from "@mui/material";
+import {
+  Box,
+  Button,
+  Typography,
+  Tooltip,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import CustomTextField from "@ui_kit/CustomTextField";
 
@@ -36,12 +43,22 @@ export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
     <Button
       onClick={onClick}
       variant="outlined"
-      startIcon={<Icon color={isActive ? theme.palette.navbarbg.main : theme.palette.brightPurple.main} />}
+      startIcon={
+        <Icon
+          color={
+            isActive
+              ? theme.palette.navbarbg.main
+              : theme.palette.brightPurple.main
+          }
+        />
+      }
       sx={{
         backgroundColor: isActive ? theme.palette.brightPurple.main : "#eee4fc",
         borderRadius: 0,
         border: "none",
-        color: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
+        color: isActive
+          ? theme.palette.brightPurple.main
+          : theme.palette.grey2.main,
         p: "7px",
         width: "auto",
         minWidth: 0,
@@ -51,14 +68,18 @@ export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
         },
         "&:hover": {
           border: "none",
-          borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
+          borderColor: isActive
+            ? theme.palette.brightPurple.main
+            : theme.palette.grey2.main,
         },
       }}
     />
   );
 }
 
-export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictProps) {
+export default function SettingOpytionsPict({
+  totalIndex,
+}: SettingOpytionsPictProps) {
   const quizId = Number(useParams().quizId);
   const { listQuestions } = questionStore();
   const theme = useTheme();
@@ -100,13 +121,17 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP
               <SelectIconButton
                 key={index}
                 onClick={() => updateProportions(value)}
-                isActive={listQuestions[quizId][totalIndex].content.xy === value}
+                isActive={
+                  listQuestions[quizId][totalIndex].content.xy === value
+                }
                 Icon={icon}
               />
             ))}
           </Box>
 
-          <Typography sx={{ marginBottom: "15px" }}>Настройки ответов</Typography>
+          <Typography sx={{ marginBottom: "15px" }}>
+            Настройки ответов
+          </Typography>
 
           <CustomCheckbox
             sx={{ display: "block" }}
@@ -166,7 +191,9 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP
                   },
                 })
               }
-              isActive={listQuestions[quizId][totalIndex].content.format === "carousel"}
+              isActive={
+                listQuestions[quizId][totalIndex].content.format === "carousel"
+              }
               Icon={FormatIcon2}
             />
             <SelectIconButton
@@ -178,11 +205,15 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP
                   },
                 })
               }
-              isActive={listQuestions[quizId][totalIndex].content.format === "masonry"}
+              isActive={
+                listQuestions[quizId][totalIndex].content.format === "masonry"
+              }
               Icon={FormatIcon1}
             />
           </Box>
-          <Typography sx={{ marginBottom: "15px" }}>Настройки вопросов</Typography>
+          <Typography sx={{ marginBottom: "15px" }}>
+            Настройки вопросов
+          </Typography>
           <CustomCheckbox
             label={"Необязательный вопрос"}
             checked={listQuestions[quizId][totalIndex].content.required}
@@ -210,7 +241,14 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP
                 })
               }
             />
-            <InfoIcon />
+            <Tooltip
+              title="Будет отображаться как заголовок вопроса в приходящих заявках."
+              placement="top"
+            >
+              <Box>
+                <InfoIcon />
+              </Box>
+            </Tooltip>
           </Box>
           {listQuestions[quizId][totalIndex].content.innerNameCheck && (
             <CustomTextField

src/pages/Questions/OwnTextField/OwnTextField.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useParams } from "react-router-dom";
-import { Box, Typography, useTheme } from "@mui/material";
+import { Box, Typography, Tooltip, useTheme } from "@mui/material";
 
 import CustomTextField from "@ui_kit/CustomTextField";
 import ButtonsOptions from "../ButtonsOptions";
@@ -57,10 +57,21 @@ export default function OwnTextField({ totalIndex }: Props) {
           >
             Пользователю будет дано поле для ввода значения{" "}
           </Typography>
-          <InfoIcon />
+          <Tooltip
+            title="Будет использоваться для ввода значения."
+            placement="top"
+          >
+            <Box>
+              <InfoIcon />
+            </Box>
+          </Tooltip>
         </Box>
       </Box>
-      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
+      <ButtonsOptions
+        switchState={switchState}
+        SSHC={SSHC}
+        totalIndex={totalIndex}
+      />
       <SwitchTextField switchState={switchState} totalIndex={totalIndex} />
     </>
   );

src/pages/Questions/OwnTextField/settingTextField.tsx

@@ -6,6 +6,7 @@ import {
   Radio,
   RadioGroup,
   Typography,
+  Tooltip,
   useMediaQuery,
   useTheme,
 } from "@mui/material";
@@ -33,7 +34,9 @@ const ANSWER_TYPES: Answer[] = [
   { name: "Только числа", value: "number" },
 ];
 
-export default function SettingTextField({ totalIndex }: SettingTextFieldProps) {
+export default function SettingTextField({
+  totalIndex,
+}: SettingTextFieldProps) {
   const { listQuestions } = questionStore();
   const quizId = Number(useParams().quizId);
   const theme = useTheme();
@@ -55,7 +58,9 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
           <RadioGroup
             aria-labelledby="demo-controlled-radio-buttons-group"
             name="controlled-radio-buttons-group"
-            value={ANSWER_TYPES.findIndex(({ value }) => listQuestions[quizId][totalIndex].content[value])}
+            value={ANSWER_TYPES.findIndex(
+              ({ value }) => listQuestions[quizId][totalIndex].content[value]
+            )}
             onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
               const clonContent = {
                 ...listQuestions[quizId][totalIndex].content,
@@ -76,7 +81,9 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
                   "& .MuiRadio-root": { padding: "8px 9px" },
                 }}
                 value={index}
-                control={<Radio icon={<CheckIcon />} checkedIcon={<CheckedIcon />} />}
+                control={
+                  <Radio icon={<CheckIcon />} checkedIcon={<CheckedIcon />} />
+                }
                 label={name}
               />
             ))}
@@ -117,8 +124,15 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
 
               updateQuestionsList(quizId, totalIndex, { content: clonContent });
             }}
-          />{" "}
+          />
-          <InfoIcon />
+          <Tooltip
+            title="Будет отображаться как заголовок вопроса в приходящих заявках."
+            placement="top"
+          >
+            <Box>
+              <InfoIcon />
+            </Box>
+          </Tooltip>
         </Box>
         {listQuestions[quizId][totalIndex].content.innerNameCheck && (
           <CustomTextField

src/pages/Questions/PageOptions/SettingPageOptions.tsx

@@ -1,5 +1,5 @@
 import { useParams } from "react-router-dom";
-import { Box, Typography } from "@mui/material";
+import { Box, Typography, Tooltip } from "@mui/material";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import CustomTextField from "@ui_kit/CustomTextField";
 
@@ -34,7 +34,14 @@ export default function SettingPageOptions({
             })
           }
         />
-        <InfoIcon />
+        <Tooltip
+          title="Будет отображаться как заголовок вопроса в приходящих заявках."
+          placement="top"
+        >
+          <Box>
+            <InfoIcon />
+          </Box>
+        </Tooltip>
       </Box>
       {listQuestions[quizId][totalIndex].content.innerNameCheck && (
         <CustomTextField

src/pages/Questions/RatingOptions/settingRating.tsx

@@ -4,6 +4,7 @@ import {
   ButtonBase,
   Slider,
   Typography,
+  Tooltip,
   useMediaQuery,
   useTheme,
 } from "@mui/material";
@@ -145,8 +146,15 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
 
               updateQuestionsList(quizId, totalIndex, { content: clonContent });
             }}
-          />{" "}
+          />
-          <InfoIcon />
+          <Tooltip
+            title="Будет отображаться как заголовок вопроса в приходящих заявках."
+            placement="top"
+          >
+            <Box>
+              <InfoIcon />
+            </Box>
+          </Tooltip>
         </Box>
         {listQuestions[quizId][totalIndex].content.innerNameCheck && (
           <CustomTextField

src/pages/Questions/SliderOptions/settingSlider.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 InfoIcon from "../../../assets/icons/InfoIcon";
@@ -17,7 +23,13 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
   const isMobile = useMediaQuery(theme.breakpoints.down(790));
 
   return (
-    <Box sx={{ display: "flex", justifyContent: "space-between", flexDirection: isWrappColumn ? "column" : null }}>
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "space-between",
+        flexDirection: isWrappColumn ? "column" : null,
+      }}
+    >
       <Box sx={{ padding: "20px" }}>
         <Typography>Настройки ползунка</Typography>
         <CustomCheckbox
@@ -55,8 +67,15 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
 
               updateQuestionsList(quizId, totalIndex, { content: clonContent });
             }}
-          />{" "}
+          />
-          <InfoIcon />
+          <Tooltip
+            title="Будет отображаться как заголовок вопроса в приходящих заявках."
+            placement="top"
+          >
+            <Box>
+              <InfoIcon />
+            </Box>
+          </Tooltip>
         </Box>
         {listQuestions[quizId][totalIndex].content.innerNameCheck && (
           <CustomTextField

src/pages/Questions/UploadFile/settingUpload.tsx

@@ -1,5 +1,5 @@
 import { useParams } from "react-router-dom";
-import { Box, Typography } from "@mui/material";
+import { Box, Typography, Tooltip } from "@mui/material";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import CustomTextField from "@ui_kit/CustomTextField";
 
@@ -50,8 +50,15 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
 
             updateQuestionsList(quizId, totalIndex, { content: clonContent });
           }}
-        />{" "}
+        />
-        <InfoIcon />
+        <Tooltip
+          title="Будет отображаться как заголовок вопроса в приходящих заявках."
+          placement="top"
+        >
+          <Box>
+            <InfoIcon />
+          </Box>
+        </Tooltip>
       </Box>
       {listQuestions[quizId][totalIndex].content.innerNameCheck && (
         <CustomTextField

src/pages/Questions/answerOptions/responseSettings.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 InfoIcon from "../../../assets/icons/InfoIcon";
 import CustomTextField from "@ui_kit/CustomTextField";
@@ -83,10 +89,19 @@ export default function ResponseSettings({ totalIndex }: Props) {
                 clonContent.innerName = "";
               }
 
-              updateQuestionsList(quizId, totalIndex, { content: clonContent });
+              updateQuestionsList(quizId, totalIndex, {
+                content: clonContent,
+              });
             }}
           />
-          <InfoIcon />
+          <Tooltip
+            title="Будет отображаться как заголовок вопроса в приходящих заявках."
+            placement="top"
+          >
+            <Box>
+              <InfoIcon />
+            </Box>
+          </Tooltip>
         </Box>
         {listQuestions[quizId][totalIndex].content.innerNameCheck && (
           <CustomTextField

src/pages/startPage/StartPageSettings.tsx

@@ -7,6 +7,7 @@ import {
   FormControlLabel,
   MenuItem,
   Select,
+  Tooltip,
   Typography,
   useTheme,
 } from "@mui/material";
@@ -40,9 +41,21 @@ interface HandleNext {
 }
 
 const designTypes = [
-  ["standard", (color: string) => <LayoutStandartIcon color={color} />, "Standard"],
+  [
-  ["expanded", (color: string) => <LayoutExpandedIcon color={color} />, "Expanded"],
+    "standard",
-  ["centered", (color: string) => <LayoutCenteredIcon color={color} />, "Centered"],
+    (color: string) => <LayoutStandartIcon color={color} />,
+    "Standard",
+  ],
+  [
+    "expanded",
+    (color: string) => <LayoutExpandedIcon color={color} />,
+    "Expanded",
+  ],
+  [
+    "centered",
+    (color: string) => <LayoutCenteredIcon color={color} />,
+    "Centered",
+  ],
 ] as const;
 // type DesignType = typeof designTypes[number][0];
 
@@ -56,7 +69,9 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
   const designType = listQuizes[params].startpage;
   const StartPageClone = listQuizes[params];
   console.log(StartPageClone);
-  const [backgroundType, setBackgroundType] = useState(listQuizes[params].config.startpage.background.type);
+  const [backgroundType, setBackgroundType] = useState(
+    listQuizes[params].config.startpage.background.type
+  );
   const [alignType, setAlignType] = useState<AlignType>("left");
 
   const videoHC = (videoInp: HTMLInputElement) => {
@@ -148,7 +163,15 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
             flex: `1 1 342px`,
           }}
         >
-          <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mb: "14px" }}>Дизайн</Typography>
+          <Typography
+            sx={{
+              fontWeight: 500,
+              color: theme.palette.grey3.main,
+              mb: "14px",
+            }}
+          >
+            Дизайн
+          </Typography>
           <FormControl
             fullWidth
             size="small"
@@ -163,7 +186,9 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
               variant="outlined"
               value={designType}
               displayEmpty
-              onChange={(e) => updateQuizesList(params, { startpage: e.target.value })}
+              onChange={(e) =>
+                updateQuizesList(params, { startpage: e.target.value })
+              }
               sx={{
                 height: "48px",
                 borderRadius: "8px",
@@ -218,13 +243,26 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
                     color: theme.palette.grey2.main,
                   }}
                 >
-                  {type[1](type[0] === designType ? theme.palette.orange.main : theme.palette.grey2.main)}
+                  {type[1](
+                    type[0] === designType
+                      ? theme.palette.orange.main
+                      : theme.palette.grey2.main
+                  )}
                   {type[2]}
                 </MenuItem>
               ))}
             </Select>
           </FormControl>
-          <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Фон</Typography>
+          <Typography
+            sx={{
+              fontWeight: 500,
+              color: theme.palette.grey3.main,
+              mt: "20px",
+              mb: "14px",
+            }}
+          >
+            Фон
+          </Typography>
           <Box
             sx={{
               display: "flex",
@@ -267,7 +305,14 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
                 flexDirection: "column",
               }}
             >
-              <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
+              <Typography
+                sx={{
+                  fontWeight: 500,
+                  color: theme.palette.grey3.main,
+                  mt: "20px",
+                  mb: "14px",
+                }}
+              >
                 Изображение
               </Typography>
               <DropZone text={"5 MB максимум"} heightImg={"110px"} />
@@ -284,7 +329,12 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
               }}
             >
               <FormControlLabel
-                control={<Checkbox icon={<IconCheck />} checkedIcon={<MobilePhoneIcon bgcolor={"#EEE4FC"} />} />}
+                control={
+                  <Checkbox
+                    icon={<IconCheck />}
+                    checkedIcon={<MobilePhoneIcon bgcolor={"#EEE4FC"} />}
+                  />
+                }
                 label="мобильная версия"
                 sx={{
                   color: theme.palette.brightPurple.main,
@@ -299,7 +349,14 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
               />
               {mobileVersion ? (
                 <Box sx={{ display: "flex", flexDirection: "column" }}>
-                  <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>
+                  <Typography
+                    sx={{
+                      fontWeight: 500,
+                      color: theme.palette.grey3.main,
+                      mt: "11px",
+                      mb: "14px",
+                    }}
+                  >
                     Изображение для мобильной версии
                   </Typography>
                   <DropZone text={"5 MB максимум"} heightImg={"110px"} />
@@ -325,11 +382,25 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
                 mb: "14px",
               }}
             >
-              <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main }}>Добавить видео</Typography>
+              <Typography
-              <InfoIcon />
+                sx={{ fontWeight: 500, color: theme.palette.grey3.main }}
+              >
+                Добавить видео
+              </Typography>
+              <Tooltip title="Можно загрузить видео." placement="top">
+                <Box>
+                  <InfoIcon />
+                </Box>
+              </Tooltip>
             </Box>
             <ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
-              <input onChange={(event) => videoHC(event.target)} hidden accept=".mp4" multiple type="file" />
+              <input
+                onChange={(event) => videoHC(event.target)}
+                hidden
+                accept=".mp4"
+                multiple
+                type="file"
+              />
               <UploadBox
                 icon={<UploadIcon />}
                 sx={{
@@ -340,7 +411,14 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
               />
             </ButtonBase>
             {video ? <video src={video} width="400" controls /> : null}
-            <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "5px" }}>
+            <Typography
+              sx={{
+                fontWeight: 500,
+                color: theme.palette.grey3.main,
+                mt: "20px",
+                mb: "5px",
+              }}
+            >
               Настройки видео
             </Typography>
             <CustomCheckbox
@@ -352,13 +430,27 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
                 updateQuizesList(params, { config: SPageClone });
               }}
             />
-            <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>
+            <Typography
+              sx={{
+                fontWeight: 500,
+                color: theme.palette.grey3.main,
+                mt: "11px",
+                mb: "14px",
+              }}
+            >
               Изображение для мобильной версии
             </Typography>
             <DropZone text={"5 MB максимум"} heightImg={"110px"} />
           </Box>
 
-          <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
+          <Typography
+            sx={{
+              fontWeight: 500,
+              color: theme.palette.grey3.main,
+              mt: "20px",
+              mb: "14px",
+            }}
+          >
             Расположение элементов
           </Typography>
           <Box
@@ -406,11 +498,26 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
               flexDirection: "column",
             }}
           >
-            <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, margin: "20px 0" }}>Логотип</Typography>
+            <Typography
+              sx={{
+                fontWeight: 500,
+                color: theme.palette.grey3.main,
+                margin: "20px 0",
+              }}
+            >
+              Логотип
+            </Typography>
             <DropZone text={"5 MB максимум"} heightImg={"110px"} />
           </Box>
 
-          <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
+          <Typography
+            sx={{
+              fontWeight: 500,
+              color: theme.palette.grey3.main,
+              mt: "20px",
+              mb: "14px",
+            }}
+          >
             Favicon
           </Typography>
           <Box
@@ -420,7 +527,11 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
               gap: "10px",
             }}
           >
-            <DropFav sx={{ height: "48px", width: "48px" }} heightImg={"48px"} widthImg={"48px"} />
+            <DropFav
+              sx={{ height: "48px", width: "48px" }}
+              heightImg={"48px"}
+              widthImg={"48px"}
+            />
 
             <Typography
               sx={{
@@ -442,13 +553,28 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
             flex: `1 1 795px`,
           }}
         >
-          <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mb: "14px" }}>Заголовок</Typography>
+          <Typography
+            sx={{
+              fontWeight: 500,
+              color: theme.palette.grey3.main,
+              mb: "14px",
+            }}
+          >
+            Заголовок
+          </Typography>
           <CustomTextField
             placeholder="Текст-заполнитель — это текст, который"
             text={listQuizes[params].name}
             onChange={(e) => updateQuizesList(params, { name: e.target.value })}
           />
-          <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
+          <Typography
+            sx={{
+              fontWeight: 500,
+              color: theme.palette.grey3.main,
+              mt: "20px",
+              mb: "14px",
+            }}
+          >
             Текст
           </Typography>
           <CustomTextField
@@ -456,7 +582,14 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
             text={listQuizes[params].config.startpage.description}
             onChange={mutationHC}
           />
-          <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
+          <Typography
+            sx={{
+              fontWeight: 500,
+              color: theme.palette.grey3.main,
+              mt: "20px",
+              mb: "14px",
+            }}
+          >
             Текст кнопки
           </Typography>
           <CustomTextField
@@ -464,7 +597,14 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
             text={listQuizes[params].config.startpage.button}
             onChange={mutationButtonHC}
           />
-          <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
+          <Typography
+            sx={{
+              fontWeight: 500,
+              color: theme.palette.grey3.main,
+              mt: "20px",
+              mb: "14px",
+            }}
+          >
             Телефон
           </Typography>
           <CustomTextField
@@ -482,7 +622,14 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
               updateQuizesList(params, { config: SPageClone });
             }}
           />
-          <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>
+          <Typography
+            sx={{
+              fontWeight: 500,
+              color: theme.palette.grey3.main,
+              mt: "11px",
+              mb: "14px",
+            }}
+          >
             Название или слоган компании
           </Typography>
           <CustomTextField
@@ -490,7 +637,14 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
             text={listQuizes[params].config.info.orgname}
             onChange={mutationOrgNameHC}
           />
-          <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
+          <Typography
+            sx={{
+              fontWeight: 500,
+              color: theme.palette.grey3.main,
+              mt: "20px",
+              mb: "14px",
+            }}
+          >
             Сайт
           </Typography>
           <CustomTextField
@@ -498,7 +652,14 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
             text={listQuizes[params].config.info.site}
             onChange={mutationSiteHC}
           />
-          <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
+          <Typography
+            sx={{
+              fontWeight: 500,
+              color: theme.palette.grey3.main,
+              mt: "20px",
+              mb: "14px",
+            }}
+          >
             Юридическая информация
           </Typography>
           <CustomTextField
@@ -524,13 +685,22 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
               icon={
                 <Button
                   variant="outlined"
-                  sx={{ backgroundColor: "transparent", color: theme.palette.brightPurple.main }}
+                  sx={{
+                    backgroundColor: "transparent",
+                    color: theme.palette.brightPurple.main,
+                  }}
                 >
                   Отключить стартовую страницу
                 </Button>
               }
               checkedIcon={
-                <Button variant="outlined" sx={{ backgroundColor: theme.palette.brightPurple.main, color: "white" }}>
+                <Button
+                  variant="outlined"
+                  sx={{
+                    backgroundColor: theme.palette.brightPurple.main,
+                    color: "white",
+                  }}
+                >
                   Включить стартовую страницу
                 </Button>
               }
@@ -561,7 +731,8 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
               "https://happypik.ru/wp-content/uploads/2019/09/njashnye-kotiki8.jpg";
             SPageClone.startpage.background.mobile =
               "https://krot.info/uploads/posts/2022-03/1646156155_3-krot-info-p-smeshnie-tolstie-koti-smeshnie-foto-3.png";
-            SPageClone.startpage.background.video = "https://youtu.be/dbaPkCiLPKQ";
+            SPageClone.startpage.background.video =
+              "https://youtu.be/dbaPkCiLPKQ";
             updateQuizesList(params, { config: SPageClone });
             handleNext();
             createQuestion(params);