From 7d00c61f4a53135c7f24c3bfd89ebdebb09726b7 Mon Sep 17 00:00:00 2001
From: GongFlying <150640661+gzcqqqqqqqq1@users.noreply.github.com>
Date: Sat, 9 May 2026 23:28:55 +0800
Subject: [PATCH 1/3] new toolTip UI

---
 src/DTableToolTip/index.css | 45 ++++++++++++++++++++++++
 src/DTableToolTip/index.js  | 69 +++++++++++++++++++++++++++++++++++++
 src/index.js                |  2 ++
 3 files changed, 116 insertions(+)
 create mode 100644 src/DTableToolTip/index.css
 create mode 100644 src/DTableToolTip/index.js

diff --git a/src/DTableToolTip/index.css b/src/DTableToolTip/index.css
new file mode 100644
index 00000000..b88af6bb
--- /dev/null
+++ b/src/DTableToolTip/index.css
@@ -0,0 +1,45 @@
+.dtable-tooltip {
+  position: absolute;
+  z-index: 1070;
+}
+
+.dtable-tooltip .tooltip {
+  max-width: 242px;
+  min-width: max-content;
+  opacity: 1;
+}
+
+.dtable-tooltip .tooltip .tooltip-inner {
+  font-size: 14px;
+  text-align: start;
+  background-color: var(--bs-body-color);
+  color: var(--bs-body-bg);
+  border-radius: 4px;
+  padding: 4px 8px;
+  line-height: 20px;
+  font-weight: normal;
+}
+
+.dtable-tooltip-shortcut-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  line-height: 20px;
+}
+
+.dtable-tooltip-shortcut-keys {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.dtable-tooltip-shortcut-key {
+  display: inline-block;
+  padding: 2px 8px;
+  border: 1px solid #999;
+  border-radius: 4px;
+  white-space: nowrap;
+  line-height: 14px;
+}
diff --git a/src/DTableToolTip/index.js b/src/DTableToolTip/index.js
new file mode 100644
index 00000000..83aa47ec
--- /dev/null
+++ b/src/DTableToolTip/index.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { UncontrolledTooltip } from 'reactstrap';
+
+import './index.css';
+
+const DTableToolTip = ({ target, placement = 'bottom', className, children, shortcut }) => {
+
+  const hasShortcut = Boolean(shortcut);
+
+  const renderContent = () => {
+    if (hasShortcut) {
+      return (
+        <div className="dtable-tooltip-shortcut-inner">
+          <span className="dtable-tooltip-text">{children}</span>
+          <span className="dtable-tooltip-shortcut-keys">
+            {shortcut.map((key, index) => (
+              <span key={index} className="dtable-tooltip-shortcut-key">
+                {key}
+              </span>
+            ))}
+          </span>
+        </div>
+      );
+    }
+
+    return children;
+  };
+
+  const tooltipProps = {
+    target,
+    placement,
+    className: `dtable-tooltip ${className ? className : ''}`,
+    innerClassName: hasShortcut ? 'dtable-tooltip-shortcut-inner' : '',
+    delay: { show: 0, hide: 0 },
+    hideArrow: true,
+    autohide: false,
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [0, -2.5],
+        },
+      },
+      {
+        name: 'preventOverflow',
+        options: {
+          boundariesElement: 'window',
+        },
+      }
+    ],
+  };
+
+  return (
+    <UncontrolledTooltip {...tooltipProps}>
+      {renderContent()}
+    </UncontrolledTooltip>
+  );
+};
+
+DTableToolTip.propTypes = {
+  target: PropTypes.string.isRequired,
+  placement: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  className: PropTypes.string,
+  children: PropTypes.node,
+  shortcut: PropTypes.arrayOf(PropTypes.string),
+};
+
+export default DTableToolTip;
diff --git a/src/index.js b/src/index.js
index 8570ec2b..181a2626 100644
--- a/src/index.js
+++ b/src/index.js
@@ -72,6 +72,8 @@ export { default as DTableGroupSelect } from './DTableGroupSelect/index';
 export { default as DTableSelectLabel } from './DTableSelect/dtable-select-label';
 export { default as DTableSwitch } from './DTableSwitch';
 export { default as DTableCustomizeSelect } from './DTableCustomizeSelect';
+export { default as DTableToolTip } from './DTableToolTip';
+
 export { default as DTableCustomizeCollaboratorSelect } from './DTableCustomizeCollaboratorSelect';
 export { default as DTableSearchInput } from './DTableSearchInput';
 export { default as DTableColorPicker } from './DTableColorPicker';

From cbf51a835f4305941ae34796a9a4c7456b9f66c7 Mon Sep 17 00:00:00 2001
From: GongFlying <150640661+gzcqqqqqqqq1@users.noreply.github.com>
Date: Mon, 11 May 2026 10:44:03 +0800
Subject: [PATCH 2/3] formula column support /n

---
 src/DTableToolTip/index.css |  2 +-
 src/IconButton/index.js     | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/DTableToolTip/index.css b/src/DTableToolTip/index.css
index b88af6bb..f6d53d1d 100644
--- a/src/DTableToolTip/index.css
+++ b/src/DTableToolTip/index.css
@@ -1,6 +1,6 @@
 .dtable-tooltip {
   position: absolute;
-  z-index: 1070;
+  z-index: 99999;
 }
 
 .dtable-tooltip .tooltip {
diff --git a/src/IconButton/index.js b/src/IconButton/index.js
index 6398c75d..eb701207 100644
--- a/src/IconButton/index.js
+++ b/src/IconButton/index.js
@@ -1,13 +1,20 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import DTableToolTip from '../DTableToolTip';
+
+const IconButton = ({ disabled, className, icon, children, title, ...otherProperties }) => {
+  const uniqueId = useMemo(() => `seatable-icon-btn-${Math.random().toString(36).substr(2, 9)}`, []);
 
-const IconButton = ({ disabled, className, icon, children, ...otherProperties }) => {
   return (
     <div
       className={classnames('seatable-icon-btn', className, { 'disabled': disabled })}
       {...otherProperties}
+      id={uniqueId}
     >
+      <DTableToolTip placement="bottom" target={uniqueId} >
+        {title}
+      </DTableToolTip>
       {icon && (<i className={classnames('seatable-icon dtable-font', `dtable-icon-${icon}`)} aria-hidden="true"></i>)}
       {children}
     </div>

From cb2f3b86a5028ecb4d03f09d65d66a51b55e12d9 Mon Sep 17 00:00:00 2001
From: GongFlying <150640661+gzcqqqqqqqq1@users.noreply.github.com>
Date: Mon, 11 May 2026 17:50:52 +0800
Subject: [PATCH 3/3] update Icon btn

---
 src/DTableModalHeader/index.js   | 3 ++-
 src/NotificationPopover/index.js | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/DTableModalHeader/index.js b/src/DTableModalHeader/index.js
index 7af79786..f66ad64b 100644
--- a/src/DTableModalHeader/index.js
+++ b/src/DTableModalHeader/index.js
@@ -1,13 +1,14 @@
 import React from 'react';
 import { ModalHeader } from 'reactstrap';
 import IconButton from '../IconButton';
+import { getLocale } from '../lang';
 
 import './index.css';
 
 const DTableModalHeader = ({ children, ...props }) => {
   const customCloseBtn = (
     <button type="button" className="close dtable-modal-close" data-dismiss="modal" aria-label="Close" onClick={props.toggle}>
-      <IconButton icon="x" className="dtable-modal-close-inner" />
+      <IconButton icon="x" className="dtable-modal-close-inner" title={getLocale('Close')}/>
     </button>
   );
   return (
diff --git a/src/NotificationPopover/index.js b/src/NotificationPopover/index.js
index 0095647c..e9420f20 100644
--- a/src/NotificationPopover/index.js
+++ b/src/NotificationPopover/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Popover } from 'reactstrap';
 import IconButton from '../IconButton';
+import { getLocale } from '../lang';
 
 import './index.css';
 
@@ -74,7 +75,7 @@ export default class NotificationPopover extends React.Component {
         <div className="notification-container" ref={ref => this.notificationContainerRef = ref}>
           <div className="notification-header">
             {headerText}
-            <IconButton icon="x" onClick={this.props.onNotificationListToggle} />
+            <IconButton icon="x" onClick={this.props.onNotificationListToggle} title={getLocale('Close')}/>
           </div>
           <div className="notification-body">
             {this.props.enableWeixin &&