Create Tooltip component

client/src/common/components/Tooltip/Tooltip.jsx

@@ -0,0 +1,15 @@
+import "./styles.sass";
+
+export const Tooltip = ({children, content, position = "bottom"}) => {
+    if (!content) return children;
+
+    return (
+        <div className="tooltip-wrapper">
+            {children}
+            <div className={`tooltip-popup tooltip-${position}`}>
+                <span className="tooltip-content">{content}</span>
+                <span className="tooltip-arrow"/>
+            </div>
+        </div>
+    );
+};

client/src/common/components/Tooltip/index.js

@@ -0,0 +1 @@
+export {Tooltip as default} from "./Tooltip.jsx";

client/src/common/components/Tooltip/styles.sass

@@ -0,0 +1,70 @@
+@use "@/common/styles/colors" as *
+
+.tooltip-wrapper
+    display: inline-flex
+    position: relative
+
+    &:hover .tooltip-popup
+        opacity: 1
+        visibility: visible
+
+.tooltip-popup
+    position: absolute
+    z-index: 1000
+    pointer-events: none
+    opacity: 0
+    visibility: hidden
+    transition: opacity 0.15s ease, visibility 0.15s ease
+    left: 0
+    right: 0
+    display: flex
+    justify-content: center
+
+.tooltip-content
+    display: inline-block
+    padding: 0.5rem 0.75rem
+    font-size: 0.85rem
+    font-weight: 500
+    color: $white
+    background-color: $dark-gray
+    border: 1px solid $light-gray
+    border-radius: 0.5rem
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 4px 8px rgba(0, 0, 0, 0.15)
+    backdrop-filter: blur(12px)
+    -webkit-backdrop-filter: blur(12px)
+    white-space: nowrap
+    position: relative
+
+.tooltip-arrow
+    width: 10px
+    height: 10px
+    background-color: $dark-gray
+    border: 1px solid $light-gray
+    position: absolute
+    left: 50%
+    margin-left: -5px
+
+.tooltip-top
+    bottom: 100%
+    padding-bottom: 8px
+
+    .tooltip-arrow
+        bottom: 3px
+        transform: rotate(45deg)
+        border-top: none
+        border-left: none
+
+.tooltip-bottom
+    top: 100%
+    padding-top: 8px
+
+    .tooltip-arrow
+        top: 3px
+        transform: rotate(45deg)
+        border-bottom: none
+        border-right: none
+
+@media (max-width: 600px)
+    .tooltip-content
+        font-size: 0.8rem
+        padding: 0.4rem 0.6rem