add tooltip

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

@@ -0,0 +1,51 @@
+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 (active && 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} className="relative inline-block cursor-pointer">
+      {active && (
+        <div ref={popUpRef} className={`tooltip-box ${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,20 @@
+.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);
+}
+
+.tooltip-title {
+    color: #333;
+    font-size: 14px;
+    margin-bottom: 5px;
+}
+
+.tooltip-content {
+    color: #666;
+    font-size: 12px;
+}
+

frontend/src/static/js/components/media-viewer/ImageViewer.js

@@ -1,6 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { SiteContext } from '../../utils/contexts/';
 import { MediaPageStore } from '../../utils/stores/';
+import Tooltip from '../_shared/ToolTip';
 
 export default function ImageViewer() {
   const site = useContext(SiteContext);
@@ -85,7 +86,10 @@ export default function ImageViewer() {
 
   return !image ? null : (
     <div className="viewer-image-container">
+      <Tooltip content={"load full-image"} position='center'>
+
       <img src={image} alt={MediaPageStore.get('media-data').title || null} onClick={() => setIsModalOpen(true)} />
+      </Tooltip>
       {/* {slideshowItems && <div>{slideshowItems.map((i)=><li>{i.poster_url}</li>)}</div>} */}
       {isModalOpen && slideshowItems && (
         <div className="modal-overlay" onClick={() => setIsModalOpen(false)}>