feat: branch tooltip

src/pages/Questions/ButtonsOptionsAndPict.css

@@ -0,0 +1,10 @@
+.MuiTooltip-popper > .MuiTooltip-tooltip {
+    background: #fff;
+    border-radius: 6px;
+    color: #9A9AAF;
+    box-shadow: 0px 8px 24px rgba(210, 208, 225, 0.4);
+}
+
+.MuiTooltip-popper > .MuiTooltip-tooltip .MuiTooltip-arrow::before {
+    background: #fff;
+}

src/pages/Questions/ButtonsOptionsAndPict.tsx

@@ -3,28 +3,37 @@ import React from "react";
 import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
 import Clue from "../../assets/icons/questionsPage/clue";
 import Branching from "../../assets/icons/questionsPage/branching";
-import { Box, IconButton, useTheme } from "@mui/material";
+import { Box, IconButton, Tooltip, Typography, useTheme } from "@mui/material";
 import HideIcon from "../../assets/icons/questionsPage/hideIcon";
 import CopyIcon from "../../assets/icons/questionsPage/CopyIcon";
 import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
 import ImgIcon from "../../assets/icons/questionsPage/imgIcon";
-import {useParams} from "react-router-dom";
+import { useParams } from "react-router-dom";
-import { questionStore, removeQuestion, resetSomeField} from "@root/questions";
+import { questionStore, removeQuestion, resetSomeField } from "@root/questions";
+import { branchStore } from "@root/branches";
+
+import "./ButtonsOptionsAndPict.css";
 
 interface Props {
   switchState: string;
   SSHC: (data: string) => void;
-  totalIndex: number
+  totalIndex: number;
 }
 
-export default function ButtonsOptionsAndPict({ SSHC, switchState, totalIndex }: Props) {
+export default function ButtonsOptionsAndPict({
+  SSHC,
+  switchState,
+  totalIndex,
+}: Props) {
   const params = Number(useParams().quizId);
-  const {openedModalSettings} = questionStore()
+  const { openedModalSettings } = questionStore();
-  const openedModal = () => {
+  const { branch } = branchStore();
-    resetSomeField({openedModalSettings: "open"})
-    console.log(openedModalSettings)
-  }
   const theme = useTheme();
+
+  const openedModal = () => {
+    resetSomeField({ openedModalSettings: "open" });
+  };
+
   return (
     <Box
       sx={{
@@ -46,11 +55,19 @@ export default function ButtonsOptionsAndPict({ SSHC, switchState, totalIndex }:
             SSHC("setting");
           }}
           sx={{
-            backgroundColor: switchState === "setting" ? theme.palette.brightPurple.main : "transparent",
+            backgroundColor:
-            color: switchState === "setting" ? "#ffffff" : theme.palette.grey3.main,
+              switchState === "setting"
+                ? theme.palette.brightPurple.main
+                : "transparent",
+            color:
+              switchState === "setting" ? "#ffffff" : theme.palette.grey3.main,
           }}
         >
-          <SettingIcon color={switchState === "setting" ? "#ffffff" : theme.palette.grey3.main} />
+          <SettingIcon
+            color={
+              switchState === "setting" ? "#ffffff" : theme.palette.grey3.main
+            }
+          />
           Настройки
         </MiniButtonSetting>
         <MiniButtonSetting
@@ -58,37 +75,98 @@ export default function ButtonsOptionsAndPict({ SSHC, switchState, totalIndex }:
             SSHC("help");
           }}
           sx={{
-            backgroundColor: switchState === "help" ? theme.palette.brightPurple.main : "transparent",
+            backgroundColor:
-            color: switchState === "help" ? "#ffffff" : theme.palette.grey3.main,
+              switchState === "help"
+                ? theme.palette.brightPurple.main
+                : "transparent",
+            color:
+              switchState === "help" ? "#ffffff" : theme.palette.grey3.main,
           }}
         >
-          <Clue color={switchState === "help" ? "#ffffff" : theme.palette.grey3.main} />
+          <Clue
+            color={
+              switchState === "help" ? "#ffffff" : theme.palette.grey3.main
+            }
+          />
           Помощь
         </MiniButtonSetting>
-        <MiniButtonSetting
+        <Tooltip
-          onClick={() => {
+          arrow
-            SSHC("branching");
+          placement="right"
-            openedModal()
+          title={
-          }}
+            <Box>
-          sx={{
+              <Typography
-            backgroundColor: switchState === "branching" ? theme.palette.brightPurple.main : "transparent",
+                sx={{
-            color: switchState === "branching" ? "#ffffff" : theme.palette.grey3.main,
+                  color: "#4D4D4D",
-          }}
+                  fontWeight: "bold",
+                  fontSize: "14px",
+                  marginBottom: "10px",
+                }}
+              >
+                Будет показан при условии
+              </Typography>
+              <Typography sx={{ fontWeight: "bold", fontSize: "12px" }}>
+                Название
+              </Typography>
+              <Typography
+                sx={{
+                  fontWeight: "bold",
+                  fontSize: "12px",
+                  marginBottom: "10px",
+                }}
+              >
+                Условие 1, Условие 2
+              </Typography>
+              <Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}>
+                Все условия обязательны
+              </Typography>
+            </Box>
+          }
         >
-          <Branching color={switchState === "branching" ? "#ffffff" : theme.palette.grey3.main} />
+          <MiniButtonSetting
-          Ветвление
+            onClick={() => {
-        </MiniButtonSetting>
+              SSHC("branching");
+              openedModal();
+            }}
+            sx={{
+              backgroundColor:
+                switchState === "branching"
+                  ? theme.palette.brightPurple.main
+                  : "transparent",
+              color:
+                switchState === "branching"
+                  ? "#ffffff"
+                  : theme.palette.grey3.main,
+            }}
+          >
+            <Branching
+              color={
+                switchState === "branching"
+                  ? "#ffffff"
+                  : theme.palette.grey3.main
+              }
+            />
+            Ветвление
+          </MiniButtonSetting>
+        </Tooltip>
         <MiniButtonSetting
           onClick={() => {
             SSHC("image");
-
           }}
           sx={{
-            backgroundColor: switchState === "image" ? theme.palette.brightPurple.main : "transparent",
+            backgroundColor:
-            color: switchState === "image" ? "#ffffff" : theme.palette.grey3.main,
+              switchState === "image"
+                ? theme.palette.brightPurple.main
+                : "transparent",
+            color:
+              switchState === "image" ? "#ffffff" : theme.palette.grey3.main,
           }}
         >
-          <ImgIcon color={switchState === "image" ? "#ffffff" : theme.palette.grey3.main} />
+          <ImgIcon
+            color={
+              switchState === "image" ? "#ffffff" : theme.palette.grey3.main
+            }
+          />
           Изображение
         </MiniButtonSetting>
       </Box>
@@ -98,13 +176,16 @@ export default function ButtonsOptionsAndPict({ SSHC, switchState, totalIndex }:
         }}
       >
         <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
-          <HideIcon color={"#4D4D4D"}/>
+          <HideIcon color={"#4D4D4D"} />
         </IconButton>
         <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
-          <CopyIcon color={"#4D4D4D"}/>
+          <CopyIcon color={"#4D4D4D"} />
         </IconButton>
-        <IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => removeQuestion(totalIndex)}>
+        <IconButton
-          <DeleteIcon color={"#4D4D4D"}/>
+          sx={{ borderRadius: "6px", padding: "2px" }}
+          onClick={() => removeQuestion(totalIndex)}
+        >
+          <DeleteIcon color={"#4D4D4D"} />
         </IconButton>
       </Box>
     </Box>