feat: improve main toolbar tooltip

package.json

@@ -108,7 +108,7 @@
     "react-ocl-nmr": "^3.0.1",
     "react-plot": "^1.4.2",
     "react-rnd": "^10.4.1",
-    "react-science": "^2.0.0",
+    "react-science": "^3.0.0",
     "react-slider": "^2.0.6",
     "react-table": "^7.8.0",
     "react-transition-group": "^4.4.5",

src/component/elements/CloseButton.tsx

@@ -4,7 +4,7 @@ import { ToolbarItemProps } from 'react-science/ui';
 import { ToolBarButton } from './ToolBarButton';
 
 export function CloseButton(
-  props: Pick<ToolbarItemProps, 'onClick' | 'title' | 'className'>,
+  props: Pick<ToolbarItemProps, 'onClick' | 'tooltip' | 'className'>,
 ) {
   return (
     <ToolBarButton

src/component/elements/CustomToolTip.tsx

@@ -0,0 +1,188 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { CSSProperties } from 'react';
+
+const styles: Record<
+  | 'titleContainer'
+  | 'title'
+  | 'description'
+  | 'shortcutContainer'
+  | 'shortcutItem',
+  CSSProperties
+> = {
+  titleContainer: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: '0.9rem',
+    flex: 1,
+    padding: '5px 0',
+    textAlign: 'left',
+    color: 'white',
+  },
+  description: {
+    paddingTop: '1rem',
+    fontSize: '0.7rem',
+    textAlign: 'left',
+    color: 'white',
+  },
+  shortcutContainer: {
+    display: 'flex',
+    textWrap: 'nowrap',
+    color: 'white',
+  },
+  shortcutItem: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: '0.2rem',
+    border: '1px solid #ccc',
+    borderRadius: '4px',
+    height: 'calc(0.2rem + 20px)',
+    minWidth: 'calc(0.2rem + 20px)' /* Adjust padding and border width */,
+    marginLeft: '5px',
+    fontSize: '0.75rem',
+    fontWeight: 'bold',
+  },
+};
+
+export interface ToolTipItem {
+  title: string;
+  shortcuts?: string[];
+  subTitles?: ToolTipItem[];
+  description?: string;
+  link?: string;
+}
+
+export function CustomToolTip(props: ToolTipItem) {
+  const {
+    title,
+    shortcuts = [],
+    subTitles = [],
+    description = '',
+    link,
+  } = props;
+
+  return (
+    <div
+      style={{
+        width: 250,
+        padding: '0.5rem',
+      }}
+    >
+      <div style={styles.titleContainer}>
+        <span style={styles.title}>{title}</span>
+        <ShortCuts shortcuts={shortcuts} />
+      </div>
+      <SubTitles items={subTitles} />
+
+      {(description || link) && (
+        <p style={styles.description}>
+          {description}
+          {link && (
+            <a
+              style={description ? { paddingLeft: '5px' } : {}}
+              target="_blank"
+              href={link}
+              rel="noreferrer"
+            >
+              Learn more
+            </a>
+          )}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function ShortCuts({
+  shortcuts,
+  style = {},
+}: {
+  shortcuts: string[];
+  style?: CSSProperties;
+}) {
+  return (
+    <div style={styles.shortcutContainer}>
+      {shortcuts.map((key, index) => {
+        return (
+          <div
+            key={key}
+            style={{
+              ...styles.shortcutItem,
+              ...(index === 0 && { margin: 0 }),
+              ...style,
+            }}
+          >
+            <span>{key}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+const subTitleStyle = css`
+  padding-left: 5px;
+  list-style: none;
+
+  li {
+    position: relative;
+    padding-left: 15px;
+    box-sizing: border-box;
+
+    &::before {
+      position: absolute;
+      top: 15px;
+      left: 0;
+      width: 10px;
+      height: 1px;
+      margin: auto;
+      content: '';
+      background-color: white;
+    }
+
+    &::after {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 1px;
+      height: 100%;
+      content: '';
+      background-color: white;
+    }
+
+    &:last-child::after {
+      height: 15px;
+    }
+  }
+
+  li:first-child {
+    padding-top: 5px;
+
+    &::before {
+      top: 20px;
+    }
+  }
+`;
+
+function SubTitles({ items }: { items: ToolTipItem[] }) {
+  if (!items || items.length === 0) return null;
+
+  return (
+    <ul css={subTitleStyle}>
+      {items.map(({ shortcuts = [], title }) => (
+        <li key={title}>
+          <div style={styles.titleContainer}>
+            <span style={{ ...styles.title, fontSize: '0.7rem' }}>{title}</span>
+            <ShortCuts style={{ padding: '0.1rem' }} shortcuts={shortcuts} />
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+}

src/component/elements/SaveButton.tsx

@@ -3,7 +3,9 @@ import { ToolbarItemProps } from 'react-science/ui';
 
 import { ToolBarButton } from './ToolBarButton';
 
-export function SaveButton(props: Pick<ToolbarItemProps, 'onClick' | 'title'>) {
+export function SaveButton(
+  props: Pick<ToolbarItemProps, 'onClick' | 'tooltip'>,
+) {
   return (
     <ToolBarButton
       id="save-button"

src/component/header/Header.tsx

@@ -179,14 +179,14 @@ function HeaderInner(props: HeaderInnerProps) {
               {!general?.hideHelp && (
                 <Toolbar.Item
                   id="user-manual"
-                  title="User manual"
+                  tooltip="User manual"
                   onClick={() => window.open(docsBaseUrl, '_blank')}
                   icon={<FaQuestionCircle />}
                 />
               )}
               <Toolbar.Item
                 id="user-manual"
-                title="NMRium channel"
+                tooltip="NMRium channel"
                 onClick={() =>
                   window.open('https://www.youtube.com/@nmrium', '_blank')
                 }
@@ -201,7 +201,7 @@ function HeaderInner(props: HeaderInnerProps) {
                 <Toolbar.Item
                   id="full-screen"
                   onClick={fullscreen.toggle}
-                  title="Full screen"
+                  tooltip="Full screen"
                   className="windowButton"
                   icon={<FaRegWindowMaximize />}
                 />

src/component/header/PhaseCorrectionTwoDimensionsPanel.tsx

@@ -199,7 +199,7 @@ export default function PhaseCorrectionTwoDimensionsPanel() {
             css={css`
               border: 1px solid #f7f7f7;
             `}
-            title="Horizontal"
+            tooltip="Horizontal"
             icon={<FaRulerHorizontal />}
             active={activeTraceDirection === 'horizontal'}
             onClick={() => onChangeHandler('horizontal')}
@@ -208,7 +208,7 @@ export default function PhaseCorrectionTwoDimensionsPanel() {
             css={css`
               border: 1px solid #f7f7f7;
             `}
-            title="Vertical"
+            tooltip="Vertical"
             icon={<FaRulerVertical />}
             active={activeTraceDirection === 'vertical'}
             onClick={() => onChangeHandler('vertical')}
@@ -218,7 +218,7 @@ export default function PhaseCorrectionTwoDimensionsPanel() {
       <div style={{ paddingRight: '5px' }}>
         <Toolbar>
           <Toolbar.Item
-            title="Add the trace in both directions"
+            tooltip="Add the trace in both directions"
             icon={<MdLooksTwo />}
             active={addTracesToBothDirections}
             onClick={handleToggleAddTraceToBothDirections}

src/component/modal/AboutPredictionModal.tsx

@@ -46,7 +46,7 @@ function AboutPredictionModal() {
       <Toolbar.Item
         icon={<FaInfo />}
         onClick={openDialog}
-        title="About prediction"
+        tooltip="About prediction"
       />
       <Dialog
         isOpen={isOpenDialog}

src/component/modal/AboutSpectrumSimulationModal.tsx

@@ -46,7 +46,7 @@ function AboutSpectrumSimulationModal() {
       <Toolbar>
         <Toolbar.Item
           onClick={openDialog}
-          title="About prediction"
+          tooltip="About prediction"
           icon={<FaInfo />}
         />
       </Toolbar>

src/component/modal/CopyClipboardModal.tsx

@@ -51,7 +51,7 @@ function CopyClipboardModal({
           <FaCopy />
         </button>
 
-        <CloseButton title="Close" onClick={onClose} />
+        <CloseButton tooltip="Close" onClick={onClose} />
       </div>
       <div
         className="inner-container"

src/component/modal/EditPeakShapeModal.tsx

@@ -113,7 +113,7 @@ function EditPeakShapeModal({
       <div className="header handle">
         <span>{`Peak Shape Edition ( ${valuePPM} PPM)`} </span>
         <CloseButton
-          title="Close"
+          tooltip="Close"
           onClick={() => onClose?.()}
           className="close-bt"
         />

src/component/modal/PredictSpectraModal.tsx

@@ -141,7 +141,7 @@ export function PredictSpectraModal({
       <Toolbar>
         <Toolbar.Item
           icon={<SvgNmrFt />}
-          title="Predict spectra"
+          tooltip="Predict spectra"
           onClick={openDialog}
         />
       </Toolbar>

src/component/modal/aboutUs/AboutUsModal.tsx

@@ -78,7 +78,7 @@ function AboutUsModal() {
       <Toolbar.Item
         onClick={openDialog}
         id="logo"
-        title="About NMRium"
+        tooltip="About NMRium"
         icon={<SvgLogoNmrium />}
       />
       <Dialog

src/component/modal/changeSum/ChangeSumModal.tsx

@@ -23,7 +23,7 @@ export default function ChangeSumModal(props: ChangeSumModalProps) {
       <Toolbar.Item
         disabled={disabled}
         icon={<SvgNmrSum />}
-        title={
+        tooltip={
           currentSum
             ? `Change ${sumType} sum (${currentSum.toFixed(2)})`
             : `Change ${sumType} sum`

src/component/modal/editRange/EditRangeModal.tsx

@@ -230,10 +230,10 @@ function EditRangeModal({
         </span>
         <SaveButton
           onClick={() => formRef.current.submitForm()}
-          title="Save and Exit"
+          tooltip="Save and Exit"
         />
 
-        <CloseButton title="Close" onClick={handleOnClose} />
+        <CloseButton tooltip="Close" onClick={handleOnClose} />
       </div>
       <Formik
         innerRef={formRef}

src/component/modal/editRange/forms/components/signal-tabs/SignalJCouplingsTable.tsx

@@ -240,13 +240,13 @@ export function SignalJCouplingsTable(props: SignalJCouplingsTableProps) {
         <Toolbar>
           <Toolbar.Item
             icon={<FaPlus />}
-            title="Add a new J coupling"
+            tooltip="Add a new J coupling"
             intent="success"
             onClick={() => addHandler(jCouplings)}
           />
           <Toolbar.Item
             icon={<FaRegTrashAlt />}
-            title="Delete all J couplings"
+            tooltip="Delete all J couplings"
             intent="danger"
             onClick={deleteAllHandler}
           />