From 1769c078830cc07fc122427b3fc0f5c316b128ec Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Wed, 12 Nov 2025 10:54:43 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD?=
 =?UTF-8?q?=D0=B5=D0=BD=D1=82=D0=B0=20Tooltip=20=D1=81=20=D0=B8=D0=B7?=
 =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD=D0=B8=D0=B5=D0=BC=20=D1=81=D1=82?=
 =?UTF-8?q?=D0=B8=D0=BB=D1=8F=20=D0=BD=D0=B0=20Tabler=20UI=20=D0=B8=20?=
 =?UTF-8?q?=D1=83=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD=D0=B8=D0=B5=D0=BC=20?=
 =?UTF-8?q?=D0=BF=D0=BE=D0=B7=D0=B8=D1=86=D0=B8=D0=BE=D0=BD=D0=B8=D1=80?=
 =?UTF-8?q?=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D1=8F.=20=D0=A3=D0=B1=D1=80?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=BE=20=D0=B2=D1=8B=D1=87=D0=B8=D1=81=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=BA=D0=BE=D0=BE=D1=80=D0=B4=D0=B8=D0=BD?=
 =?UTF-8?q?=D0=B0=D1=82,=20=D1=82=D0=B5=D0=BF=D0=B5=D1=80=D1=8C=20=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B4=D1=81=D0=BA=D0=B0=D0=B7=D0=BA=D0=B0=20=D0=BF=D0=BE?=
 =?UTF-8?q?=D0=B7=D0=B8=D1=86=D0=B8=D0=BE=D0=BD=D0=B8=D1=80=D1=83=D0=B5?=
 =?UTF-8?q?=D1=82=D1=81=D1=8F=20=D0=BE=D1=82=D0=BD=D0=BE=D1=81=D0=B8=D1=82?=
 =?UTF-8?q?=D0=B5=D0=BB=D1=8C=D0=BD=D0=BE=20=D1=82=D1=80=D0=B8=D0=B3=D0=B3?=
 =?UTF-8?q?=D0=B5=D1=80=D0=B0=20=D1=81=20=D0=B8=D1=81=D0=BF=D0=BE=D0=BB?=
 =?UTF-8?q?=D1=8C=D0=B7=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=D0=BC=20positi?=
 =?UTF-8?q?on:=20absolute.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Tooltip.jsx | 224 ++++++++++------------------
 1 file changed, 80 insertions(+), 144 deletions(-)

diff --git a/frontend/src/components/Tooltip.jsx b/frontend/src/components/Tooltip.jsx
index 787097d..2e9a1ce 100644
--- a/frontend/src/components/Tooltip.jsx
+++ b/frontend/src/components/Tooltip.jsx
@@ -1,8 +1,8 @@
 import { useState, useRef, useEffect } from 'react'
 
 /**
- * Tooltip компонент для отображения подсказок
- * Поддерживает keyboard shortcuts и различные позиции
+ * Tooltip компонент в стиле Tabler UI
+ * Использует position: absolute относительно trigger элемента
  */
 function Tooltip({ 
   children, 
@@ -13,43 +13,14 @@ function Tooltip({
   className = ''
 }) {
   const [isVisible, setIsVisible] = useState(false)
-  const [coords, setCoords] = useState({ x: 0, y: 0 })
   const timeoutRef = useRef(null)
   const triggerRef = useRef(null)
 
-  const showTooltip = (e) => {
+  const showTooltip = () => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current)
     
     timeoutRef.current = setTimeout(() => {
-      if (triggerRef.current) {
-        const rect = triggerRef.current.getBoundingClientRect()
-        let x = 0, y = 0
-        
-        switch (position) {
-          case 'top':
-            x = rect.left + rect.width / 2
-            y = rect.top
-            break
-          case 'bottom':
-            x = rect.left + rect.width / 2
-            y = rect.bottom
-            break
-          case 'left':
-            x = rect.left
-            y = rect.top + rect.height / 2
-            break
-          case 'right':
-            x = rect.right
-            y = rect.top + rect.height / 2
-            break
-          default:
-            x = rect.left + rect.width / 2
-            y = rect.top
-        }
-        
-        setCoords({ x, y })
-        setIsVisible(true)
-      }
+      setIsVisible(true)
     }, delay)
   }
 
@@ -69,129 +40,94 @@ function Tooltip({
   }, [])
 
   return (
-    <>
-      <span
-        ref={triggerRef}
-        onMouseEnter={showTooltip}
-        onMouseLeave={hideTooltip}
-        onFocus={showTooltip}
-        onBlur={hideTooltip}
-        className={`tooltip-trigger ${className}`}
-        style={{ position: 'relative', display: 'inline-block' }}
-      >
-        {children}
-      </span>
+    <span
+      ref={triggerRef}
+      onMouseEnter={showTooltip}
+      onMouseLeave={hideTooltip}
+      onFocus={showTooltip}
+      onBlur={hideTooltip}
+      className={`tooltip-trigger ${className}`}
+      style={{ position: 'relative', display: 'inline-block' }}
+    >
+      {children}
       
       {isVisible && (
         <div
-          className={`tooltip-content tooltip-${position}`}
+          className={`tooltip bs-tooltip-${position} show`}
+          role="tooltip"
           style={{
-            position: 'fixed',
-            left: `${coords.x}px`,
-            top: `${coords.y}px`,
-            zIndex: 9999,
-            pointerEvents: 'none'
+            position: 'absolute',
+            zIndex: 1070,
+            display: 'block',
+            margin: 0,
+            pointerEvents: 'none',
+            ...(position === 'top' && {
+              bottom: '100%',
+              left: '50%',
+              transform: 'translateX(-50%)',
+              marginBottom: '8px'
+            }),
+            ...(position === 'bottom' && {
+              top: '100%',
+              left: '50%',
+              transform: 'translateX(-50%)',
+              marginTop: '8px'
+            }),
+            ...(position === 'left' && {
+              right: '100%',
+              top: '50%',
+              transform: 'translateY(-50%)',
+              marginRight: '8px'
+            }),
+            ...(position === 'right' && {
+              left: '100%',
+              top: '50%',
+              transform: 'translateY(-50%)',
+              marginLeft: '8px'
+            })
           }}
         >
+          <div className="tooltip-arrow" style={(() => {
+            const styles = {
+              position: 'absolute',
+              width: '8px',
+              height: '8px',
+              background: 'inherit'
+            }
+            if (position === 'top') {
+              styles.bottom = '0'
+              styles.left = '50%'
+              styles.transform = 'translateX(-50%) translateY(50%) rotate(45deg)'
+            } else if (position === 'bottom') {
+              styles.top = '0'
+              styles.left = '50%'
+              styles.transform = 'translateX(-50%) translateY(-50%) rotate(45deg)'
+            } else if (position === 'left') {
+              styles.right = '0'
+              styles.top = '50%'
+              styles.transform = 'translateX(50%) translateY(-50%) rotate(45deg)'
+            } else if (position === 'right') {
+              styles.left = '0'
+              styles.top = '50%'
+              styles.transform = 'translateX(-50%) translateY(-50%) rotate(45deg)'
+            }
+            return styles
+          })()}></div>
           <div className="tooltip-inner">
-            <div className="tooltip-text">{content}</div>
+            {content}
             {shortcut && (
-              <kbd className="tooltip-shortcut ms-2">{shortcut}</kbd>
+              <kbd className="ms-2" style={{
+                background: 'rgba(255, 255, 255, 0.2)',
+                padding: '0.125rem 0.375rem',
+                borderRadius: '0.25rem',
+                fontSize: '0.75rem',
+                fontFamily: 'monospace'
+              }}>{shortcut}</kbd>
             )}
           </div>
         </div>
       )}
-      
-      <style jsx>{`
-        .tooltip-content {
-          animation: tooltipFadeIn 0.15s ease-out;
-        }
-        
-        .tooltip-top {
-          transform: translate(-50%, calc(-100% - 8px));
-        }
-        
-        .tooltip-bottom {
-          transform: translate(-50%, 8px);
-        }
-        
-        .tooltip-left {
-          transform: translate(calc(-100% - 8px), -50%);
-        }
-        
-        .tooltip-right {
-          transform: translate(8px, -50%);
-        }
-        
-        .tooltip-inner {
-          background: var(--tblr-dark, #1e293b);
-          color: white;
-          padding: 0.5rem 0.75rem;
-          border-radius: 0.375rem;
-          font-size: 0.875rem;
-          box-shadow: var(--shadow-lg);
-          white-space: nowrap;
-          display: flex;
-          align-items: center;
-          max-width: 300px;
-        }
-        
-        .tooltip-shortcut {
-          background: rgba(255, 255, 255, 0.2);
-          padding: 0.125rem 0.375rem;
-          border-radius: 0.25rem;
-          font-size: 0.75rem;
-          font-family: monospace;
-        }
-        
-        @keyframes tooltipFadeIn {
-          from {
-            opacity: 0;
-            transform: translate(-50%, calc(-100% - 4px)) scale(0.95);
-          }
-          to {
-            opacity: 1;
-            transform: translate(-50%, calc(-100% - 8px)) scale(1);
-          }
-        }
-        
-        @keyframes tooltipFadeInTop {
-          from {
-            opacity: 0;
-            transform: translate(-50%, calc(-100% - 4px)) scale(0.95);
-          }
-          to {
-            opacity: 1;
-            transform: translate(-50%, calc(-100% - 8px)) scale(1);
-          }
-        }
-        
-        @keyframes tooltipFadeInBottom {
-          from {
-            opacity: 0;
-            transform: translate(-50%, 4px) scale(0.95);
-          }
-          to {
-            opacity: 1;
-            transform: translate(-50%, 8px) scale(1);
-          }
-        }
-        
-        .tooltip-content.tooltip-top {
-          animation: tooltipFadeInTop 0.15s ease-out;
-        }
-        
-        .tooltip-content.tooltip-bottom {
-          animation: tooltipFadeInBottom 0.15s ease-out;
-        }
-        
-        @media (prefers-color-scheme: dark) {
-          .tooltip-inner {
-            background: var(--tblr-gray-800, #1e293b);
-          }
-        }
-      `}</style>
-    </>
+    </span>
   )
 }