new toolTip UI

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;
+}

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