tool tip and margins

elizaOS · Nov 5, 2024 · f111efb · f111efb
1 parent 9586d6f
commit f111efb
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 1 deletion.
diff --git a/src/components/LeaderboardPartners.module.css b/src/components/LeaderboardPartners.module.css
@@ -117,6 +117,46 @@
     object-fit: contain;
 }
 
+.tooltipContainer {
+    position: relative;
+    display: inline-flex;
+}
+
+.tooltip {
+    visibility: hidden;
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 8px 12px;
+    border-radius: 8px;
+    font-size: 14px;
+    white-space: nowrap;
+    z-index: 100;
+    margin-bottom: 8px;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.tooltipContainer:hover .tooltip {
+    visibility: visible;
+    opacity: 1;
+}
+
+/* Optional: Add a small arrow at the bottom of tooltip */
+.tooltip::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 5px;
+    border-style: solid;
+    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
+}
+
 @media (max-width: 768px) {
     .headingParent, .row, .row1 {
         grid-template-columns: 12px 1fr 0.8fr 0.8fr;

diff --git a/src/components/LeaderboardPartners.tsx b/src/components/LeaderboardPartners.tsx
@@ -137,14 +137,17 @@ const LeaderboardPartners: FC = () => {
             </div>
             <div className={styles.textWrapper}>
               {partner.trustScore === 0 ? (
-                <div className={styles.imageWrapper}>
+                <div className={styles.tooltipContainer}>
                   <Image 
                     src="/null.svg"
                     alt="Null trust score"
                     width={20}
                     height={20}
                     className={styles.trustScoreImage}
                   />
+                  <span className={styles.tooltip}>
+                  AI Marc is Calculating Your Trust
+                  </span>
                 </div>
               ) : (
                 <div className={styles.text3}>{partner.trustScore.toFixed(1)}</div>

diff --git a/src/components/ProfileWallets.module.css b/src/components/ProfileWallets.module.css
@@ -95,4 +95,8 @@
         margin: 24px 0 16px 24px;  /* Add spacing between sections */
         font-family: 'SF Compact Rounded';
     }
+    .buttonParent {
+        margin: 0 24px;
+        font-family: 'SF Compact Rounded';
+    }
 }
diff --git a/src/components/Socials.module.css b/src/components/Socials.module.css
@@ -103,4 +103,8 @@
         margin: 24px 0px 16px 24px;  /* Add spacing between sections */
         font-family: 'SF Compact Rounded';
     }
+    .buttonParent {
+        margin: 0 24px;
+        font-family: 'SF Compact Rounded';
+    }
 }