bugfix - tooltip not displaying properly (#44)

babylonlabs-io · Aug 7, 2024 · 576853d · 576853d
2 parents 3b4bbb7 + 93f5110
commit 576853d
Show file tree

Hide file tree

Showing 12 changed files with 31 additions and 16 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simple-staking",
-  "version": "0.2.30",
+  "version": "0.2.31",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/src/app/components/Connect/ConnectSmall.tsx b/src/app/components/Connect/ConnectSmall.tsx
@@ -54,7 +54,7 @@ export const ConnectSmall: React.FC<ConnectSmallProps> = ({
         >
           <AiOutlineInfoCircle />
         </span>
-        <Tooltip id="tooltip-connect" />
+        <Tooltip id="tooltip-connect" className="tooltip-wrap" />
       </>
     );
   };

diff --git a/src/app/components/Delegations/Delegation.tsx b/src/app/components/Delegations/Delegation.tsx
@@ -152,7 +152,7 @@ export const Delegation: React.FC<DelegationProps> = ({
             >
               <AiOutlineInfoCircle />
             </span>
-            <Tooltip id={`tooltip-${stakingTxHash}`} />
+            <Tooltip id={`tooltip-${stakingTxHash}`} className="tooltip-wrap" />
           </div>
         </div>
         {generateActionButton()}

diff --git a/src/app/components/FinalityProviders/FinalityProvider.tsx b/src/app/components/FinalityProviders/FinalityProvider.tsx
@@ -95,7 +95,7 @@ export const FinalityProvider: React.FC<FinalityProviderProps> = ({
           0
         )}
       </div>
-      <Tooltip id="tooltip-missing" />
+      <Tooltip id="tooltip-missing" className="tooltip-wrap" />
     </div>
   );
 };
diff --git a/src/app/components/FinalityProviders/FinalityProviders.tsx b/src/app/components/FinalityProviders/FinalityProviders.tsx
@@ -82,8 +82,8 @@ export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
           )}
         </InfiniteScroll>
       </div>
-      <Tooltip id="tooltip-delegations" />
-      <Tooltip id="tooltip-stake" />
+      <Tooltip id="tooltip-delegations" className="tooltip-wrap" />
+      <Tooltip id="tooltip-stake" className="tooltip-wrap" />
     </div>
   );
 };
diff --git a/src/app/components/Modals/ConnectModal.tsx b/src/app/components/Modals/ConnectModal.tsx
@@ -224,7 +224,7 @@ export const ConnectModal: React.FC<ConnectModalProps> = ({
                           >
                             <AiOutlineInfoCircle />
                           </span>
-                          <Tooltip id={name} />
+                          <Tooltip id={name} className="tooltip-wrap" />
                         </div>
                       )}
                     </div>

diff --git a/src/app/components/Stakers/Stakers.tsx b/src/app/components/Stakers/Stakers.tsx
@@ -89,8 +89,8 @@ export const Stakers: React.FC<StakersProps> = () => {
           <LoadingView />
         )}
       </div>
-      <Tooltip id="tooltip-delegations" />
-      <Tooltip id="tooltip-stake" />
+      <Tooltip id="tooltip-delegations" className="tooltip-wrap" />
+      <Tooltip id="tooltip-stake" className="tooltip-wrap" />
     </div>
   );
 };
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProvider.tsx b/src/app/components/Staking/FinalityProviders/FinalityProvider.tsx
@@ -79,7 +79,7 @@ export const FinalityProvider: React.FC<FinalityProviderProps> = ({
               >
                 <AiOutlineInfoCircle size={16} />
               </span>
-              <Tooltip id="tooltip-missing-fp" />
+              <Tooltip id="tooltip-missing-fp" className="tooltip-wrap" />
               <span>No data provided</span>
             </div>
           )}
@@ -100,7 +100,10 @@ export const FinalityProvider: React.FC<FinalityProviderProps> = ({
           >
             <AiOutlineInfoCircle />
           </span>
-          <Tooltip id={`tooltip-delegation-${pkHex}`} />
+          <Tooltip
+            id={`tooltip-delegation-${pkHex}`}
+            className="tooltip-wrap"
+          />
         </div>
         <div className="flex items-center justify-end gap-1 lg:justify-start">
           <p className="hidden sm:flex lg:hidden">Commission:</p>
@@ -115,7 +118,10 @@ export const FinalityProvider: React.FC<FinalityProviderProps> = ({
           >
             <AiOutlineInfoCircle />
           </span>
-          <Tooltip id={`tooltip-delegation-${pkHex}`} />
+          <Tooltip
+            id={`tooltip-delegation-${pkHex}`}
+            className="tooltip-wrap"
+          />
         </div>
       </div>
     </div>

diff --git a/src/app/components/Staking/Staking.tsx b/src/app/components/Staking/Staking.tsx
@@ -629,7 +629,7 @@ export const Staking: React.FC<StakingProps> = ({
               >
                 Preview
               </button>
-              <Tooltip id="tooltip-staking-preview" />
+              <Tooltip id="tooltip-staking-preview" className="tooltip-wrap" />
             </span>
             {previewReady && (
               <PreviewModal

diff --git a/src/app/components/Stats/Stats.tsx b/src/app/components/Stats/Stats.tsx
@@ -197,7 +197,10 @@ export const Stats: React.FC = () => {
                         >
                           <AiOutlineInfoCircle />
                         </span>
-                        <Tooltip id={`tooltip-${subSection.title}`} />
+                        <Tooltip
+                          id={`tooltip-${subSection.title}`}
+                          className="tooltip-wrap"
+                        />
                       </>
                     )}
                   </div>

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -110,3 +110,9 @@ input[type="number"] {
 body.modal-open {
   overflow: hidden;
 }
+
+.tooltip-wrap {
+  max-width: 20rem;
+  white-space: normal;
+  word-wrap: break-word;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -54,7 +54,7 @@ export const ConnectSmall: React.FC<ConnectSmallProps> = ({ @@
             >
               <AiOutlineInfoCircle />
             </span>
-            <Tooltip id="tooltip-connect" />
+            <Tooltip id="tooltip-connect" className="tooltip-wrap" />
           </>
         );
       };
@@ Expand Down @@