ya xyi znaet che pisat, zaebalsya pridymivat

src/renderer/components/CapeCard.tsx

@@ -11,7 +11,7 @@ import {
   Box,
   Chip,
 } from '@mui/material';
-
+import CustomTooltip from './CustomTooltip';
 // Тип для плаща с необязательными полями для обоих вариантов использования
 export interface CapeCardProps {
   cape: {
@@ -60,7 +60,7 @@ export default function CapeCard({
   const capeDescription = cape.cape_description || cape.description || '';
 
   return (
-    <Tooltip arrow title={capeDescription}>
+    <CustomTooltip arrow title={capeDescription}>
       <Card
         sx={{
           bgcolor: 'rgba(255, 255, 255, 0.05)',
@@ -122,6 +122,6 @@ export default function CapeCard({
           </Button>
         </CardActions>
       </Card>
-    </Tooltip>
+    </CustomTooltip>
   );
 }

src/renderer/components/CustomTooltip.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable react/jsx-props-no-spreading */
+
+import { styled } from '@mui/material/styles';
+import Tooltip, { tooltipClasses, TooltipProps } from '@mui/material/Tooltip';
+
+// Создаем кастомный стилизованный Tooltip с правильной типизацией
+const CustomTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: 'rgba(0, 0, 0, 1)',
+    color: 'white',
+    maxWidth: 300,
+    fontSize: '0.9vw',
+    border: '1px solid rgba(255, 77, 77, 0.5)',
+    borderRadius: '1vw',
+    padding: '1vw',
+    boxShadow:
+      '0 0 1vw rgba(255, 77, 77, 0.3), inset 0.8vw -0.8vw 2vw rgba(255, 77, 77, 0.15)',
+    fontFamily: 'Benzin-Bold',
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderRadius: '1vw',
+      // background: 'linear-gradient(45deg, rgba(255, 77, 77, 0.1), transparent)',
+      zIndex: -1,
+    },
+  },
+  [`& .${tooltipClasses.arrow}`]: {
+    color: 'rgba(255, 77, 77, 0.5)',
+  },
+}));
+
+export default CustomTooltip;

src/renderer/components/TopBar.tsx

@@ -5,7 +5,7 @@ import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import { useEffect, useState } from 'react';
 import { Tooltip } from '@mui/material';
 import { fetchCoins } from '../api';
-
+import CustomTooltip from './CustomTooltip';
 declare global {
   interface Window {
     electron: {
@@ -276,9 +276,11 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
       >
         {/* Кнопка регистрации, если на странице логина */}
         {username && (
-          <Tooltip
+          <CustomTooltip
             title="Попы — внутриигровая валюта, начисляемая за время игры на серверах."
             arrow
+            placement="bottom"
+            TransitionProps={{ timeout: 300 }}
           >
             <Box
               sx={{
@@ -313,7 +315,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
                 {coins}
               </Typography>
             </Box>
-          </Tooltip>
+          </CustomTooltip>
         )}
         {isLoginPage && (
           <Button