feat: fullscreen images slideshow (#1120)

frontend/src/static/js/components/_shared/ToolTip.jsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useRef, useState } from 'react';
+import './ToolTip.scss';
+
+function Tooltip({ children, content, title, position = 'right', classNames = '' }) {
+  const [active, setActive] = useState(false);
+  const [tooltipDimensions, setTooltipDimensions] = useState({
+    height: 0,
+    width: 0,
+  });
+
+  const popUpRef = useRef(null);
+
+  const showTip = () => {
+    setActive(true);
+  };
+
+  const hideTip = () => {
+    setActive(false);
+  };
+
+  useEffect(() => {
+    if (popUpRef.current) {
+      setTooltipDimensions({
+        height: popUpRef.current.clientHeight || 0,
+        width: popUpRef.current.clientWidth || 0,
+      });
+    }
+  }, [active]);
+
+  const tooltipPositionStyles = {
+    right: { left: '100%', marginLeft: '10px', top: '-50%' },
+    left: { right: '100%', marginRight: '10px', top: '-50%' },
+    top: { left: '50%', top: `-${tooltipDimensions.height + 10}px`, transform: 'translateX(-50%)' },
+    center: { top: '50%', left: '50%', translate: 'x-[-50%]' },
+    'bottom-left': { left: `-${tooltipDimensions.width - 20}px`, top: '100%', marginTop: '10px' },
+  };
+
+  return (
+    <div onMouseEnter={showTip} onMouseLeave={hideTip}>
+      <div
+        ref={popUpRef}
+        className={`tooltip-box ${active ? 'show' : 'hide'} ${classNames}`}
+        style={tooltipPositionStyles[position]}
+      >
+        {title && <div className="tooltip-title">{title}</div>}
+        <div className="tooltip-content">{content}</div>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export default Tooltip;

frontend/src/static/js/components/_shared/ToolTip.scss

@@ -0,0 +1,31 @@
+.tooltip-box {
+    position: absolute;
+    padding: 10px;
+    z-index: 100;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    opacity: 0;
+    transform: translateY(-10px);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+}
+.tooltip-box.show {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.tooltip-box.hide {
+    opacity: 0;
+    transform: translateY(-10px); 
+}
+.tooltip-title {
+    color: #333;
+    font-size: 14px;
+    margin-bottom: 5px;
+}
+
+.tooltip-content {
+    color: #666;
+    font-size: 12px;
+}
+