diff --git a/src/webportal/src/app/job-submission/components/basic-section.jsx b/src/webportal/src/app/job-submission/components/basic-section.jsx
index bf04c619df..9be988fc04 100644
--- a/src/webportal/src/app/job-submission/components/basic-section.jsx
+++ b/src/webportal/src/app/job-submission/components/basic-section.jsx
@@ -58,7 +58,7 @@ export const BasicSection = props => {
           />
           <StackItem grow>
             <div>
-              <Stack horizontal gap='s1'>
+              <Stack horizontal verticalAlign='baseline'>
                 <Label styles={basicSectionStyle.label}>{sectionLabel}</Label>
                 {sectionTooltip && <TooltipIcon content={sectionTooltip} />}
               </Stack>
diff --git a/src/webportal/src/app/job-submission/components/controls/tooltip-icon.jsx b/src/webportal/src/app/job-submission/components/controls/tooltip-icon.jsx
index eb3ddaba84..60f6bed474 100644
--- a/src/webportal/src/app/job-submission/components/controls/tooltip-icon.jsx
+++ b/src/webportal/src/app/job-submission/components/controls/tooltip-icon.jsx
@@ -24,22 +24,11 @@
  */
 
 import React from 'react';
-import { DirectionalHint, TooltipHost, Icon } from 'office-ui-fabric-react';
+import { IconButton } from 'office-ui-fabric-react';
 import PropTypes from 'prop-types';
 
 export const TooltipIcon = ({ content }) => {
-  return (
-    <TooltipHost
-      calloutProps={{
-        isBeakVisible: false,
-        directionalHint: DirectionalHint.topAutoEdge,
-        gapSpace: 8, // spacing.s1
-      }}
-      content={content}
-    >
-      <Icon styles={{ root: { verticalAlign: 'middle' } }} iconName='Info' />
-    </TooltipHost>
-  );
+  return <IconButton iconProps={{ iconName: 'Info' }} href={content} />;
 };
 
 TooltipIcon.propTypes = {
diff --git a/src/webportal/src/app/job-submission/components/customized-components.jsx b/src/webportal/src/app/job-submission/components/customized-components.jsx
index e44d34b64f..9fcf35b860 100644
--- a/src/webportal/src/app/job-submission/components/customized-components.jsx
+++ b/src/webportal/src/app/job-submission/components/customized-components.jsx
@@ -66,7 +66,7 @@ export const CSpinButton = props => {
   const _onValidate = value => _onChange(value, onValidate, value);
 
   return (
-    <Stack horizontal gap='s1' verticalAlign='baseline'>
+    <Stack horizontal verticalAlign='baseline'>
       {label && <div style={{ width: 160 }}>{label}</div>}
       {tooltip && <TooltipIcon content={tooltip} />}
       <SpinButton
diff --git a/src/webportal/src/app/job-submission/components/data/team-storage.jsx b/src/webportal/src/app/job-submission/components/data/team-storage.jsx
index c1303c33b1..cf69806ab8 100644
--- a/src/webportal/src/app/job-submission/components/data/team-storage.jsx
+++ b/src/webportal/src/app/job-submission/components/data/team-storage.jsx
@@ -160,7 +160,7 @@ export const TeamStorage = ({
 
   return (
     <div>
-      <Stack horizontal gap='s1'>
+      <Stack horizontal verticalAlign='baseline'>
         <Text
           styles={{
             fontWeight: FontWeights.semibold,
diff --git a/src/webportal/src/app/job-submission/components/job-information.jsx b/src/webportal/src/app/job-submission/components/job-information.jsx
index f429e2992b..d3ff72c29c 100644
--- a/src/webportal/src/app/job-submission/components/job-information.jsx
+++ b/src/webportal/src/app/job-submission/components/job-information.jsx
@@ -31,7 +31,6 @@ import { FormSpinButton } from './form-spin-button';
 import { VirtualCluster } from './virtual-cluster';
 import Card from '../../components/card';
 import { JobBasicInfo } from '../models/job-basic-info';
-import { PROTOCOL_TOOLTIPS } from '../utils/constants';
 
 export const JobInformation = React.memo(
   ({ jobInformation, onChange, advanceFlag }) => {
@@ -67,7 +66,6 @@ export const JobInformation = React.memo(
         <FormPage>
           <FormTextField
             sectionLabel={'Job name'}
-            sectionTooltip={PROTOCOL_TOOLTIPS.jobName}
             value={name}
             shortStyle
             onChange={onNameChange}
diff --git a/src/webportal/src/app/job-submission/components/sidebar/sidebar-card.jsx b/src/webportal/src/app/job-submission/components/sidebar/sidebar-card.jsx
index 5f632f8dc8..38d2dcff2f 100644
--- a/src/webportal/src/app/job-submission/components/sidebar/sidebar-card.jsx
+++ b/src/webportal/src/app/job-submission/components/sidebar/sidebar-card.jsx
@@ -81,7 +81,7 @@ export const SidebarCard = ({
               styles={style.actionButton}
               onClick={onSelect}
             />
-            <Stack horizontal gap='s1'>
+            <Stack horizontal verticalAlign='baseline'>
               <Text styles={style.headerText}>{title}</Text>
               {tooltip && <TooltipIcon content={tooltip} />}
             </Stack>
diff --git a/src/webportal/src/app/job-submission/components/tab-form-content.jsx b/src/webportal/src/app/job-submission/components/tab-form-content.jsx
index 3918a8cbe5..ed7ad65927 100644
--- a/src/webportal/src/app/job-submission/components/tab-form-content.jsx
+++ b/src/webportal/src/app/job-submission/components/tab-form-content.jsx
@@ -66,7 +66,6 @@ export const TabFormContent = ({
       {!isSingle && (
         <FormTextField
           sectionLabel={'Task role name'}
-          sectionTooltip={PROTOCOL_TOOLTIPS.taskRoleName}
           shortStyle
           value={jobTaskRole.name}
           onChange={value => _onValueChange('name', value)}
diff --git a/src/webportal/src/app/job-submission/components/tools/job-ssh.jsx b/src/webportal/src/app/job-submission/components/tools/job-ssh.jsx
index cd8ec13c85..409485970b 100644
--- a/src/webportal/src/app/job-submission/components/tools/job-ssh.jsx
+++ b/src/webportal/src/app/job-submission/components/tools/job-ssh.jsx
@@ -7,6 +7,7 @@ import {
   PAI_PLUGIN,
   USERSSH_TYPE_OPTIONS,
   SSH_KEY_BITS,
+  PROTOCOL_TOOLTIPS,
 } from '../../utils/constants';
 import { SSHPlugin } from '../../models/plugin/ssh-plugin';
 import SSHGenerator from './ssh-generator';
@@ -116,25 +117,16 @@ export const JobSSH = ({ extras, onExtrasChange }) => {
 
   return (
     <Stack gap='m' styles={{ root: { height: '100%' } }}>
-      <Stack horizontal gap='s1'>
+      <Stack horizontal verticalAlign='baseline'>
         <Text styles={style.headerText}>SSH</Text>
-        <TooltipIcon
-          content={`Choose SSH public key for job. Users should maintain the SSH private key themselves.`}
-        />
-      </Stack>
-      <Stack horizontal gap='s1'>
-        <Toggle
-          label={'Enable User SSH'}
-          inlineLabel={true}
-          checked={!isEmpty(sshPlugin.userssh)}
-          onChange={_onUsersshEnable}
-        />
-        <TooltipIcon
-          content={
-            'Enable User SSH to allow user attach job containers through corresponding ssh private key. You can enter your own ssh pub key or use SSH Key Generator to generate ssh key pair.'
-          }
-        />
+        <TooltipIcon content={PROTOCOL_TOOLTIPS.ssh} />
       </Stack>
+      <Toggle
+        label={'Enable User SSH'}
+        inlineLabel={true}
+        checked={!isEmpty(sshPlugin.userssh)}
+        onChange={_onUsersshEnable}
+      />
       {!isEmpty(sshPlugin.userssh) && (
         <Stack horizontal gap='l1'>
           <Dropdown
diff --git a/src/webportal/src/app/job-submission/components/tools/tensorboard.jsx b/src/webportal/src/app/job-submission/components/tools/tensorboard.jsx
index b676319df0..f445b260b2 100644
--- a/src/webportal/src/app/job-submission/components/tools/tensorboard.jsx
+++ b/src/webportal/src/app/job-submission/components/tools/tensorboard.jsx
@@ -3,7 +3,11 @@ import PropTypes from 'prop-types';
 import { cloneDeep, isNil, get } from 'lodash';
 import { Hint } from '../sidebar/hint';
 import { TooltipIcon } from '../controls/tooltip-icon';
-import { TENSORBOARD_LOG_PATH, PAI_PLUGIN } from '../../utils/constants';
+import {
+  TENSORBOARD_LOG_PATH,
+  PAI_PLUGIN,
+  PROTOCOL_TOOLTIPS,
+} from '../../utils/constants';
 import {
   FontWeights,
   Toggle,
@@ -65,12 +69,9 @@ export const TensorBoard = props => {
 
   return (
     <Stack gap='m' styles={{ root: { height: '100%' } }}>
-      <Stack horizontal gap='s1'>
+      <Stack horizontal verticalAlign='baseline'>
         <Text styles={style.headerText}>TensorBoard</Text>
-        <TooltipIcon
-          content={`You should save logs under ${TENSORBOARD_LOG_PATH} in the training script.
-          TensorBoard can only read logs from the first task role if ${TENSORBOARD_LOG_PATH} is not mounted in Data section.`}
-        />
+        <TooltipIcon content={PROTOCOL_TOOLTIPS.tensorboard} />
       </Stack>
       <Hint>
         By default, tensorBoard will read logs under{' '}
diff --git a/src/webportal/src/app/job-submission/utils/constants.js b/src/webportal/src/app/job-submission/utils/constants.js
index 3d71d98ef0..a6f9b3a6f1 100644
--- a/src/webportal/src/app/job-submission/utils/constants.js
+++ b/src/webportal/src/app/job-submission/utils/constants.js
@@ -84,32 +84,27 @@ export const PAI_ENV_VAR = [
   },
 ];
 export const PROTOCOL_TOOLTIPS = {
-  jobName:
-    'Name for the job, need to be unique, should be string in ^[A-Za-z0-9\\-._~]+$ format.',
-  taskRoleName: 'Name of the taskRole, string in ^[A-Za-z0-9\\-._~]+$ format.',
-  taskRoleContainerSize: [
-    'Resource required per container instance',
-    'CPU number and memory number will be auto scaled with GPU number by default.',
-  ],
-  hivedSkuType: [
-    'SKU defines a resource unit in all resource dimensions, ',
-    'including GPU, CPU, and memory.',
-  ],
-  taskRole: [
-    'Task roles are different types of task in the protocol.',
-    'One job may have one or more task roles, each task role has one or more instances, and each instance runs inside one container.',
-  ],
+  taskRoleContainerSize:
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/quick-start.html',
+  hivedSkuType:
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/quick-start.html',
+  taskRole:
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/how-to-run-distributed-job.html#taskrole-and-instance',
   parameters:
-    'Parameters are key-value pairs that you could save your frequently used values and reference them in command section by their keys.',
-  secrets: `Secrets are used to store sensitive data. The value will be masked and won't be seen by other users.`,
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/how-to-use-advanced-job-settings.html#parameters-and-secrets',
+  secrets: `https://openpai.readthedocs.io/en/latest/manual/cluster-user/how-to-use-advanced-job-settings.html#parameters-and-secrets`,
   data:
-    'Data section is used to generate pre-command that download/mount your data to specific path in container.',
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/how-to-manage-data.html',
   tools:
-    'Tools section is used to configure the tools that are useful for jobs.',
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/how-to-debug-jobs.html#how-to-debug-jobs',
   dockerImage:
-    'Please contact admin to make sure which cuda versions in docker image is supported by gpu drivers.',
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/docker-images-and-job-examples.html',
   teamStorage:
-    "Team share storage is external storage defined by cluster admin. Select an element means the external storage will be mount to 'path' and user can treat it as local path.",
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/how-to-manage-data.html#use-storage-in-jobs',
+  tensorboard:
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/how-to-debug-jobs.html#how-to-use-tensorboard-plugin',
+  ssh:
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/how-to-debug-jobs.html#how-to-use-ssh',
 };
 
 export const COMMAND_PLACEHOLDER = `'You could define your own Parameters, Secrets or Data mount point on the right sidebar.