diff --git a/integration-test/src/test/java/org/apache/gravitino/integration/test/web/ui/CatalogsPageTest.java b/integration-test/src/test/java/org/apache/gravitino/integration/test/web/ui/CatalogsPageTest.java
index 97616595193..2015fd749db 100644
--- a/integration-test/src/test/java/org/apache/gravitino/integration/test/web/ui/CatalogsPageTest.java
+++ b/integration-test/src/test/java/org/apache/gravitino/integration/test/web/ui/CatalogsPageTest.java
@@ -392,6 +392,7 @@ public void testViewTabMetalakeDetails() throws InterruptedException {
   @Order(8)
   public void testViewCatalogDetails() throws InterruptedException {
     catalogsPage.clickViewCatalogBtn(HIVE_CATALOG_NAME);
+    mouseMoveTo(By.xpath(".//*[@data-prev-refer='details-props-key-metastore.uris']"));
     Assertions.assertTrue(
         catalogsPage.verifyShowCatalogDetails(HIVE_CATALOG_NAME, hiveMetastoreUri));
   }
diff --git a/integration-test/src/test/java/org/apache/gravitino/integration/test/web/ui/pages/CatalogsPage.java b/integration-test/src/test/java/org/apache/gravitino/integration/test/web/ui/pages/CatalogsPage.java
index b26db557399..1df4f41729c 100644
--- a/integration-test/src/test/java/org/apache/gravitino/integration/test/web/ui/pages/CatalogsPage.java
+++ b/integration-test/src/test/java/org/apache/gravitino/integration/test/web/ui/pages/CatalogsPage.java
@@ -395,7 +395,7 @@ public boolean verifyShowCatalogDetails(String name, String hiveMetastoreUris)
       boolean isHiveURIS =
           waitShowText(
               hiveMetastoreUris,
-              By.xpath(".//*[@data-prev-refer='details-props-key-metastore.uris']"));
+              By.xpath(".//*[@data-prev-refer='tip-details-props-key-metastore.uris']"));
       boolean isShowCheck =
           waitShowText(
               "false",
diff --git a/web/src/components/DetailsDrawer.js b/web/src/components/DetailsDrawer.js
index 553f0e6fddd..a310e5fb162 100644
--- a/web/src/components/DetailsDrawer.js
+++ b/web/src/components/DetailsDrawer.js
@@ -199,14 +199,27 @@ const DetailsDrawer = props => {
                   return (
                     <TableRow key={index} data-refer={`details-props-index-${index}`}>
                       <TableCell className={'twc-py-[0.7rem]'} data-refer={`details-props-key-${item.key}`}>
-                        {item.key}
+                        <Tooltip
+                          title={<span data-refer={`tip-details-props-key-${item.key}`}>{item.key}</span>}
+                          placement='bottom'
+                        >
+                          {item.key.length > 22 ? `${item.key.substring(0, 22)}...` : item.key}
+                        </Tooltip>
                       </TableCell>
                       <TableCell
                         className={'twc-py-[0.7rem]'}
                         data-refer={`details-props-value-${item.value}`}
                         data-prev-refer={`details-props-key-${item.key}`}
                       >
-                        {item.key === 'jdbc-password' ? '[HIDDEN]' : item.value}
+                        {item.key === 'jdbc-password' && '[HIDDEN]'}
+                        {item.key !== 'jdbc-password' && (
+                          <Tooltip
+                            title={<span data-prev-refer={`tip-details-props-key-${item.key}`}>{item.value}</span>}
+                            placement='bottom'
+                          >
+                            {item.value.length > 22 ? `${item.value.substring(0, 22)}...` : item.value}
+                          </Tooltip>
+                        )}
                       </TableCell>
                     </TableRow>
                   )