From dd1ddfe7100fd7e1e8f19e67442334d0c4978d76 Mon Sep 17 00:00:00 2001
From: Aries <urchinzhou@gmail.com>
Date: Thu, 31 Jul 2025 10:55:02 +0800
Subject: [PATCH] fix expand icon tooltip (#8090)

Co-authored-by: zhouwenxuan <aries@Mac.local>
---
 .../records/record/actions-cell/index.css      | 18 +++++++++++-------
 .../records/record/actions-cell/index.js       |  9 ++++++---
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/frontend/src/metadata/views/table/table-main/records/record/actions-cell/index.css b/frontend/src/metadata/views/table/table-main/records/record/actions-cell/index.css
index 3de4d613dd..05c61c66c2 100644
--- a/frontend/src/metadata/views/table/table-main/records/record/actions-cell/index.css
+++ b/frontend/src/metadata/views/table/table-main/records/record/actions-cell/index.css
@@ -35,12 +35,7 @@
   display: none !important;
 }
 
-.sf-metadata-result-table-row .sf-metadata-result-table-cell.actions-cell #expand {
-  display: none;
-  color: #467fcf;
-}
-
-.sf-metadata-result-table-row:hover .sf-metadata-result-table-cell.actions-cell #expand {
+.sf-metadata-result-table-row:hover .sf-metadata-result-table-cell.actions-cell .row-expand {
   width: 20px;
   height: 20px;
   display: flex;
@@ -49,6 +44,15 @@
   border-radius: 50%;
 }
 
-.sf-metadata-result-table-row .sf-metadata-result-table-cell.actions-cell #expand:hover {
+.sf-metadata-result-table-row:hover .sf-metadata-result-table-cell.actions-cell .row-expand .row-expand-icon {
+  display: block;
+}
+
+.sf-metadata-result-table-row .sf-metadata-result-table-cell.actions-cell .row-expand-icon {
+  display: none;
+  color: #467fcf;
+}
+
+.sf-metadata-result-table-row .sf-metadata-result-table-cell.actions-cell .row-expand:hover {
   background-color: #c2f5e9;
 }
diff --git a/frontend/src/metadata/views/table/table-main/records/record/actions-cell/index.js b/frontend/src/metadata/views/table/table-main/records/record/actions-cell/index.js
index b67dd09c6d..b59d31fa4d 100644
--- a/frontend/src/metadata/views/table/table-main/records/record/actions-cell/index.js
+++ b/frontend/src/metadata/views/table/table-main/records/record/actions-cell/index.js
@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Tooltip } from 'reactstrap';
+import { Tooltip, UncontrolledTooltip } from 'reactstrap';
 import { gettext } from '../../../../../../../utils/constants';
 import { isMobile } from '../../../../../../../utils/utils';
 import { SEQUENCE_COLUMN_WIDTH } from '../../../../../../constants';
-import IconButton from '../../../../../../../components/icon-button';
+import Icon from '../../../../../../../components/icon';
 
 import './index.css';
 
@@ -91,7 +91,10 @@ class ActionsCell extends Component {
             </label>
           </div>
         </div>
-        <IconButton id="expand" icon="expand" text={gettext('Expand')} onClick={this.handleShowExpandedProps} />
+        <span id={`expand-row-${index}`} className="row-expand" onClick={this.handleShowExpandedProps}>
+          <Icon symbol="expand" className="row-expand-icon" />
+        </span>
+        <UncontrolledTooltip placement='bottom' target={`expand-row-${index}`} fade={false} trigger="hover">{gettext('Expand')}</UncontrolledTooltip>
       </div>
     );
   }