new toolTip UI

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 (

src/DTableToolTip/index.css

@@ -0,0 +1,45 @@
+.dtable-tooltip {
+  position: absolute;
+  z-index: 99999;
+}
+
+.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;
+}

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;

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>

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 &&

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