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] 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';