[apache#1585] improvement(UI): use browser title instead of tooltip o…

…f icon button (apache#1588)

### What changes were proposed in this pull request?

Before:
<img width="146" alt="image"
src="https://github.com/datastrato/gravitino/assets/17310559/c2b9fc69-9a07-42e9-8827-c3fd864415ff">

After:
<img width="151" alt="image"
src="https://github.com/datastrato/gravitino/assets/17310559/928d9e97-4e4a-4254-b9b5-e73f39a00890">


### Why are the changes needed?

Fix: apache#1585

### Does this PR introduce _any_ user-facing change?

N/A

### How was this patch tested?

N/A

web/app/(home)/MetalakeList.js

@@ -7,7 +7,7 @@ import { useEffect, useCallback, useState } from 'react'
 
 import Link from 'next/link'
 
-import { Box, Grid, Card, IconButton, Typography, Tooltip } from '@mui/material'
+import { Box, Grid, Card, IconButton, Typography } from '@mui/material'
 import { DataGrid } from '@mui/x-data-grid'
 
 import Icon from '@/components/Icon'
@@ -139,35 +139,32 @@ const MetalakeList = () => {
       headerName: 'Actions',
       renderCell: ({ row }) => (
         <>
-          <Tooltip title='Details' placement='top'>
-            <IconButton
-              size='small'
-              sx={{ color: theme => theme.palette.text.secondary }}
-              onClick={() => handleShowDetails(row)}
-            >
-              <Icon icon='bx:show-alt' />
-            </IconButton>
-          </Tooltip>
-
-          <Tooltip title='Edit' placement='top'>
-            <IconButton
-              size='small'
-              sx={{ color: theme => theme.palette.text.secondary }}
-              onClick={() => handleShowEditDialog(row)}
-            >
-              <Icon icon='mdi:square-edit-outline' />
-            </IconButton>
-          </Tooltip>
-
-          <Tooltip title='Delete' placement='top'>
-            <IconButton
-              size='small'
-              sx={{ color: theme => theme.palette.error.light }}
-              onClick={() => handleDeleteMetalake(row.name)}
-            >
-              <Icon icon='mdi:delete-outline' />
-            </IconButton>
-          </Tooltip>
+          <IconButton
+            title='Details'
+            size='small'
+            sx={{ color: theme => theme.palette.text.secondary }}
+            onClick={() => handleShowDetails(row)}
+          >
+            <Icon icon='bx:show-alt' />
+          </IconButton>
+
+          <IconButton
+            title='Edit'
+            size='small'
+            sx={{ color: theme => theme.palette.text.secondary }}
+            onClick={() => handleShowEditDialog(row)}
+          >
+            <Icon icon='mdi:square-edit-outline' />
+          </IconButton>
+
+          <IconButton
+            title='Delete'
+            size='small'
+            sx={{ color: theme => theme.palette.error.light }}
+            onClick={() => handleDeleteMetalake(row.name)}
+          >
+            <Icon icon='mdi:delete-outline' />
+          </IconButton>
         </>
       )
     }