seatable · LJHAAAAA · Jun 4, 2026 · Jun 2, 2026 · Jun 2, 2026 · Jun 3, 2026
diff --git a/src/Comment/footer/participants/index.js b/src/Comment/footer/participants/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { UncontrolledTooltip } from 'reactstrap';
+import DTableToolTip from '../../../DTableToolTip';
 import Participant from './participant';
 import ParticipantSelect from './participant-select';
 import { getLocale } from '../../../lang';
@@ -37,9 +37,9 @@ class Participants extends React.Component {
           </span>
         )}
         {this.addIcon && (
-          <UncontrolledTooltip delay={{ show: 0, hide: 0 }} target={this.addIcon} placement="bottom">
+          <DTableToolTip target={this.addIcon} placement="bottom">
             {getLocale('Add_participants')}
-          </UncontrolledTooltip>
+          </DTableToolTip>
         )}
         {this.ref && this.state.showParticipantSelect && (
           <ParticipantSelect

diff --git a/src/Comment/footer/participants/participant/index.js b/src/Comment/footer/participants/participant/index.js
@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-import { UncontrolledTooltip } from 'reactstrap';
+import DTableToolTip from '../../../../DTableToolTip';
 
 import './index.css';
 
@@ -10,9 +10,9 @@ const Participant = ({ participant }) => {
     <span className="dtable-ui-participant-avatar">
       <img src={participant.avatar_url} className="avatar" ref={ref} alt="avatar" />
       {ref.current && (
-        <UncontrolledTooltip delay={{ show: 0, hide: 0 }} target={ref} placement='bottom'>
+        <DTableToolTip target={ref} placement='bottom'>
           {participant.name}
-        </UncontrolledTooltip>
+        </DTableToolTip>
       )}
     </span>
   );

diff --git a/src/DTableDropdownItem/index.jsx b/src/DTableDropdownItem/index.jsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { DropdownItem, UncontrolledTooltip } from 'reactstrap';
+import { DropdownItem } from 'reactstrap';
+import DTableToolTip from '../DTableToolTip';
 import SvgIcon from '../DTableIcon/svg-icon';
 
 const DTableDropdownItem = ({ className, divider, id, toggle, disabled, tooltip, itemProps, showChecked, checked, leftSlotContent, rightSlotContent, icon, content, onClick, style, tabIndex }) => {
@@ -61,23 +62,9 @@ const DTableDropdownItem = ({ className, divider, id, toggle, disabled, tooltip,
         </span>
       )}
       {(tooltip && id) && (
-        <UncontrolledTooltip
-          target={id}
-          trigger="hover"
-          placement="right"
-          fade={false}
-          delay={{ show: 0, hide: 0 }}
-          modifiers={[
-            {
-              name: 'offset',
-              options: {
-                offset: [0, 8],
-              },
-            },
-          ]}
-        >
+        <DTableToolTip target={id} placement="right" >
           {tooltip}
-        </UncontrolledTooltip>
+        </DTableToolTip>
       )}
     </DropdownItem>
   );

diff --git a/src/DTableFiltersPopover/widgets/filter-item.js b/src/DTableFiltersPopover/widgets/filter-item.js
@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { UncontrolledTooltip } from 'reactstrap';
+import DTableToolTip from '../../DTableToolTip';
 import {
   CellType,
   COLLABORATOR_COLUMN_TYPES,
@@ -674,13 +674,12 @@ class FilterItem extends React.Component {
     return (
       <div className="ml-2">
         <span ref={this.invalidFilterTip} className="dtable-font dtable-icon-exclamation-triangle invalid-filter"></span>
-        <UncontrolledTooltip
+        <DTableToolTip
           target={this.invalidFilterTip}
           placement='bottom'
-          fade={false}
         >
           {getLocale('Invalid_filter')}
-        </UncontrolledTooltip>
+        </DTableToolTip>
       </div>
     );
   };
@@ -758,9 +757,9 @@ class FilterItem extends React.Component {
             {showToolTip &&
               <div className="ml-2">
                 <span ref={this.filterToolTip} id="filter_tool_tip" aria-hidden="true" className="dtable-font dtable-icon-exclamation-triangle" style={{ color: '#FFC92C' }}></span>
-                <UncontrolledTooltip placement="bottom" target={this.filterToolTip} >
+                <DTableToolTip placement="bottom" target={this.filterToolTip} >
                   {getLocale('filter_tip_message')}
-                </UncontrolledTooltip>
+                </DTableToolTip>
               </div>
             }
             {this.renderErrorMessage()}

diff --git a/src/DTableFiltersPopover/widgets/rate-item.js b/src/DTableFiltersPopover/widgets/rate-item.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { UncontrolledTooltip } from 'reactstrap';
+import DTableToolTip from '../../DTableToolTip';
 
 const propTypes = {
   editable: PropTypes.bool,
@@ -68,12 +68,9 @@ class RateItem extends React.Component {
       >
         <span className={`dtable-font ${rateShowType}`} ref={this.tooltipRef}></span>
         {editable &&
-          <UncontrolledTooltip
-            placement='bottom'
-            target={this.tooltipRef}
-          >
+          <DTableToolTip placement='bottom' target={this.tooltipRef} >
             {rateItemIndex}
-          </UncontrolledTooltip>
+          </DTableToolTip>
         }
       </div>
     );

diff --git a/src/DTableToolTip/index.css b/src/DTableToolTip/index.css
@@ -0,0 +1,45 @@
+.dtable-tooltip {
+  position: relative;
+  z-index: 99999;
+}
+
+.dtable-tooltip .tooltip {
+  opacity: 1;
+}
+
+.dtable-tooltip .tooltip .tooltip-inner {
+  width: fit-content;
+  max-width: 242px;
+  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
@@ -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.oneOfType([PropTypes.string, PropTypes.object, PropTypes.instanceOf(Element)]),
+  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/FileEditor/files-previewer/pc-previewer/file-previewer/index.js b/src/FileEditor/files-previewer/pc-previewer/file-previewer/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { UncontrolledTooltip } from 'reactstrap';
+import DTableToolTip from '../../../../DTableToolTip';
 import DropDownMenu from './dropdown-menu';
 import FileNameEditor from './file-name-editor';
 import { getFileUploadTime, bytesToSize } from '../../../utils';
@@ -114,9 +114,9 @@ class FilePreviewer extends React.Component {
           </div>
         </div>
         {!isShowRename && isItemFreezed && (
-          <UncontrolledTooltip delay={{ show: 0, hide: 0 }} placement="bottom" target={this.renameRef}>
+          <DTableToolTip placement="bottom" target={this.renameRef}>
             {fileItem.name}
-          </UncontrolledTooltip>
+          </DTableToolTip>
         )}
         {isShowOperation &&
           <div className="dtable-ui-file-editor-previewer-operation">
@@ -128,9 +128,9 @@ class FilePreviewer extends React.Component {
                 {fileItem.type === 'file' && errorMessage &&
                   <>
                     <span aria-hidden="true" className="dtable-font dtable-icon-download disable file-download-icon" ref={ref => this.disabledDownloadRef = ref}></span>
-                    <UncontrolledTooltip delay={{ show: 0, hide: 0 }} placement="bottom" target={this.disabledDownloadRef}>
+                    <DTableToolTip placement="bottom" target={this.disabledDownloadRef}>
                       {errorMessage}
-                    </UncontrolledTooltip>
+                    </DTableToolTip>
                   </>
                 }
               </>

diff --git a/src/FileEditor/pc-editor/addition-previewer/local-file-addition/index.js b/src/FileEditor/pc-editor/addition-previewer/local-file-addition/index.js
@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Tooltip } from 'reactstrap';
+import DTableToolTip from '../../../../DTableToolTip';
 import Progress from '../../../../UploadProgress';
 import { getFileThumbnailInfo } from '../../../../utils/url';
 import FileUploader from '../../../../FileUploader';
@@ -17,7 +17,6 @@ class LocalFileAddition extends React.Component {
       isFileTipShow: false,
       isShowDeleteIcon: false,
       enterFileIndex: -1,
-      tooltipOpen: false,
       uploadMessageList: [],
       thumbnailSrcList: [],
       reUploadFile: null,
@@ -167,15 +166,9 @@ class LocalFileAddition extends React.Component {
             </div>
           }
           {this.state.isShowDeleteIcon && this.state.enterFileIndex === index && (
-            <Tooltip
-              toggle={this.tooltipToggle}
-              delay={{ show: 0, hide: 0 }}
-              target={`file-content-tip-${index}`}
-              placement="bottom"
-              isOpen={this.state.tooltipOpen}
-            >
+            <DTableToolTip target={`file-content-tip-${index}`} placement="bottom" >
               {fileItem.name}
-            </Tooltip>
+            </DTableToolTip>
           )}
         </div>
       );

diff --git a/src/ImageEditor/images-previewer/image-preview/index.js b/src/ImageEditor/images-previewer/image-preview/index.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Tooltip } from 'reactstrap';
+import DTableToolTip from '../../../DTableToolTip';
 import DeleteTip from '../../../DeleteTip';
 import { getImageThumbnailUrl, checkImgExists, checkSVGImage, getFileName } from '../../../utils/url';
 import { FILE_EDITOR_STATUS, isMobile } from '../../../constants';
@@ -13,7 +13,6 @@ class ImagePreviewer extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isTooltipOpen: false,
       imageThumbnailUrl: ''
     };
     this.canDownLoad = props.canDownLoad;
@@ -117,16 +116,9 @@ class ImagePreviewer extends React.Component {
           }
         </div>
         {!isMobile && enterImageItemIndex === itemIndex &&
-          <Tooltip
-            placement='bottom'
-            isOpen={this.state.isTooltipOpen}
-            toggle={this.toggle}
-            target={this.ref}
-            delay={{ show: 0, hide: 0 }}
-            fade={false}
-          >
+          <DTableToolTip placement='bottom' target={this.ref} >
             {getFileName(imageItemUrl)}
-          </Tooltip>
+          </DTableToolTip>
         }
         {this.state.showTip &&
           <DeleteTip

diff --git a/src/ImageThumbnail/index.js b/src/ImageThumbnail/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Tooltip } from 'reactstrap';
+import DTableToolTip from '../DTableToolTip';
 import classnames from 'classnames';
 import DeleteTip from '../DeleteTip';
 import { getImageThumbnailUrl, checkImgExists, checkSVGImage, getFileName } from '../utils/url';
@@ -16,7 +16,6 @@ class ImageThumbnail extends React.Component {
     this.state = {
       imageThumbnailUrl: '',
       showTip: false,
-      isTooltipOpen: false,
     };
     this.ref = null;
     const { mediaUrl = '' } = props.config || {};
@@ -73,10 +72,6 @@ class ImageThumbnail extends React.Component {
     this.setState({ showTip: false });
   };
 
-  toggle = () => {
-    this.setState({ isTooltipOpen: !this.state.isTooltipOpen });
-  };
-
   render() {
     const { index, downloadImage, src, className, name } = this.props;
     const { imageThumbnailUrl } = this.state;
@@ -104,16 +99,9 @@ class ImageThumbnail extends React.Component {
           />
         }
         {!isMobile && this.ref && (
-          <Tooltip
-            placement="bottom"
-            isOpen={this.state.isTooltipOpen}
-            toggle={this.toggle}
-            target={this.ref}
-            delay={{ show: 0, hide: 0 }}
-            fade={false}
-          >
+          <DTableToolTip placement="bottom" target={this.ref} >
             {name || getFileName(src)}
-          </Tooltip>
+          </DTableToolTip>
         )}
       </>
     );