diff --git a/src/pages/PersonalizationAI/CreateButtonWithTooltip.tsx b/src/pages/PersonalizationAI/CreateButtonWithTooltip.tsx
new file mode 100644
index 00000000..c92c20d1
--- /dev/null
+++ b/src/pages/PersonalizationAI/CreateButtonWithTooltip.tsx
@@ -0,0 +1,112 @@
+import { Button, ClickAwayListener, Tooltip, useTheme } from "@mui/material";
+import { useState } from "react";
+
+interface CreateButtonWithTooltipProps {
+ gender: string;
+ age: string;
+ ageError: boolean;
+ onClick: () => void;
+}
+
+export default function CreateButtonWithTooltip({
+ gender,
+ age,
+ ageError,
+ onClick
+}: CreateButtonWithTooltipProps) {
+ const theme = useTheme();
+ const [open, setOpen] = useState(false);
+
+ const handleTooltipClose = () => {
+ setOpen(false);
+ };
+
+ const handleTooltipOpen = () => {
+ setOpen(true);
+ };
+
+ // Определяем причины неактивности кнопки
+ const getDisabledReasons = () => {
+ const reasons: string[] = [];
+
+ if (!gender) {
+ reasons.push("выберите пол");
+ }
+
+ if (!age) {
+ reasons.push("заполните поле возраста");
+ }
+
+ if (ageError) {
+ reasons.push("исправьте ошибку в поле возраста");
+ }
+
+ return reasons;
+ };
+
+ const disabledReasons = getDisabledReasons();
+ const isDisabled = !gender || !age || ageError;
+ const tooltipText = isDisabled
+ ? disabledReasons.length === 2
+ ? disabledReasons.join(' и ')
+ : disabledReasons.join('\n')
+ : '';
+
+ return (
+
+
+ {isDisabled && (
+
+ )}
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx b/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx
index 720022f3..765afb3d 100644
--- a/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx
+++ b/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx
@@ -1,7 +1,8 @@
-import { Box, FormControl, FormLabel, Checkbox, FormControlLabel, useTheme, Button, useMediaQuery } from "@mui/material";
+import { Box, FormControl, FormLabel, Checkbox, FormControlLabel, useTheme, useMediaQuery } from "@mui/material";
import CheckboxIcon from "@icons/Checkbox";
import AgeInputWithSelect from "./AgeInputWithSelect";
import { useState, useEffect } from "react";
+import CreateButtonWithTooltip from "./CreateButtonWithTooltip";
interface GenderAndAgeSelectorProps {
gender: string;
@@ -190,23 +191,12 @@ export default function GenderAndAgeSelector({
-
+ />
);
}
\ No newline at end of file