diff --git a/frontend/components/IconToolTip/IconToolTip.tsx b/frontend/components/IconToolTip/IconToolTip.tsx
new file mode 100644
index 000000000..6accd1d39
--- /dev/null
+++ b/frontend/components/IconToolTip/IconToolTip.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import ReactTooltip from 'react-tooltip';
+
+interface IIconToolTipProps {
+  text: string;
+  isHtml?: boolean;
+}
+
+// TODO: handle html text better. possibly use 'children' prop for html
+const IconToolTip = (props: IIconToolTipProps): JSX.Element => {
+  const { text, isHtml } = props;
+  return (
+    <div className="icon-tooltip">
+      <span data-tip={text} data-html={isHtml}>
+        <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="8" cy="8.59961" r="8" fill="#6A67FE" />
+          <path d="M7.49605 10.1893V9.70927C7.49605 9.33327 7.56405 8.98527 7.70005 8.66527C7.84405 8.34527 8.08405 7.99727 8.42005 7.62127C8.67605 7.34127 8.85205 7.10127 8.94805 6.90127C9.05205 6.70127 9.10405 6.48927 9.10405 6.26527C9.10405 6.00127 9.00805 5.79327 8.81605 5.64127C8.62405 5.48927 8.35205 5.41326 8.00005 5.41326C7.21605 5.41326 6.49205 5.70127 5.82805 6.27727L5.32405 5.12527C5.66005 4.82127 6.07605 4.57727 6.57205 4.39327C7.07605 4.20927 7.58405 4.11727 8.09605 4.11727C8.60005 4.11727 9.04005 4.20127 9.41605 4.36927C9.80005 4.53727 10.096 4.76927 10.304 5.06527C10.52 5.36127 10.628 5.70927 10.628 6.10927C10.628 6.47727 10.544 6.82127 10.376 7.14127C10.216 7.46127 9.92805 7.80927 9.51205 8.18527C9.13605 8.52927 8.87605 8.82927 8.73205 9.08527C8.58805 9.34127 8.49605 9.59727 8.45605 9.85327L8.40805 10.1893H7.49605ZM7.11205 12.6973V11.0293H8.79205V12.6973H7.11205Z" fill="white" />
+        </svg>
+      </span>
+      {/* same colour as $core-dark-blue-grey */}
+      <ReactTooltip effect={'solid'} data-html={isHtml} backgroundColor={'#3e4771'} />
+    </div>
+  );
+};
+
+export default IconToolTip;
diff --git a/frontend/components/IconToolTip/index.ts b/frontend/components/IconToolTip/index.ts
new file mode 100644
index 000000000..b4f1c9e92
--- /dev/null
+++ b/frontend/components/IconToolTip/index.ts
@@ -0,0 +1 @@
+export { default } from './IconToolTip';
diff --git a/frontend/components/forms/admin/AppConfigForm/AppConfigForm.jsx b/frontend/components/forms/admin/AppConfigForm/AppConfigForm.jsx
index 0eeb8b8e8..c70c0e758 100644
--- a/frontend/components/forms/admin/AppConfigForm/AppConfigForm.jsx
+++ b/frontend/components/forms/admin/AppConfigForm/AppConfigForm.jsx
@@ -13,6 +13,7 @@ import InputField from 'components/forms/fields/InputField';
 import OrgLogoIcon from 'components/icons/OrgLogoIcon';
 import Slider from 'components/forms/fields/Slider';
 import validate from 'components/forms/admin/AppConfigForm/validate';
+import IconToolTip from 'components/IconToolTip';
 
 const authMethodOptions = [
   { label: 'Plain', value: 'authmethod_plain' },
@@ -111,12 +112,17 @@ class AppConfigForm extends Component {
         </div>
 
         <div className={`${baseClass}__details`}>
-          <p><strong>Domain</strong> - If you need to specify a HELO domain, you can do it here <em className="hint hint--brand">(Default: <strong>Blank</strong>)</em></p>
-          <p><strong>Verify SSL Certs</strong> - Turn this off (not recommended) if you use a self-signed certificate <em className="hint hint--brand">(Default: <strong>On</strong>)</em></p>
-          <p><strong>Enable STARTTLS</strong> - Detects if STARTTLS is enabled in your SMTP server and starts to use it. <em className="hint hint--brand">(Default: <strong>On</strong>)</em></p>
-          <p><strong>Host Expiry</strong> - When enabled, allows automatic cleanup of hosts that have not communicated with Fleet in some number of days. <em className="hint hint--brand">(Default: <strong>Off</strong>)</em></p>
-          <p><strong>Host Expiry Window</strong> - If a host has not communicated with Fleet in the specified number of days, it will be removed.</p>
-          <p><strong>Disable Live Queries</strong> - When enabled, disables the ability to run live queries (ad hoc queries executed via the UI or fleetctl). <em className="hint hint--brand">(Default: <strong>Off</strong>)</em></p>
+          <IconToolTip
+            isHtml
+            text={'\
+              <p><strong>Domain</strong> - If you need to specify a HELO domain, you can do it here <em className="hint hint--brand">(Default: <strong>Blank</strong>)</em></p>\
+              <p><strong>Verify SSL Certs</strong> - Turn this off (not recommended) if you use a self-signed certificate <em className="hint hint--brand">(Default: <strong>On</strong>)</em></p>\
+              <p><strong>Enable STARTTLS</strong> - Detects if STARTTLS is enabled in your SMTP server and starts to use it. <em className="hint hint--brand">(Default: <strong>On</strong>)</em></p>\
+              <p><strong>Host Expiry</strong> - When enabled, allows automatic cleanup of hosts that have not communicated with Fleet in some number of days. <em className="hint hint--brand">(Default: <strong>Off</strong>)</em></p>\
+              <p><strong>Host Expiry Window</strong> - If a host has not communicated with Fleet in the specified number of days, it will be removed.</p>\
+              <p><strong>Disable Live Queries</strong> - When enabled, disables the ability to run live queries (ad hoc queries executed via the UI or fleetctl). <em className="hint hint--brand">(Default: <strong>Off</strong>)</em></p>\
+            '}
+          />
         </div>
       </div>
     );
@@ -183,7 +189,7 @@ class AppConfigForm extends Component {
             />
           </div>
           <div className={`${baseClass}__details`}>
-            <p>The base URL of this instance for use in Fleet links.</p>
+            <IconToolTip text={'The base URL of this instance for use in Fleet links.'} />
           </div>
         </div>
 
@@ -205,7 +211,7 @@ class AppConfigForm extends Component {
             />
           </div>
           <div className={`${baseClass}__details`}>
-            <p>A required human friendly name for the identity provider that will provide single sign on authentication.</p>
+            <IconToolTip text={'A required human friendly name for the identity provider that will provide single sign on authentication.'} />
           </div>
 
           <div className={`${baseClass}__inputs`}>
@@ -216,7 +222,7 @@ class AppConfigForm extends Component {
             />
           </div>
           <div className={`${baseClass}__details`}>
-            <p>The required entity ID is a URI that you use to identify Fleet when configuring the identity provider.</p>
+            <IconToolTip text={'The required entity ID is a URI that you use to identify Fleet when configuring the identity provider.'} />
           </div>
 
           <div className={`${baseClass}__inputs`}>
@@ -224,11 +230,13 @@ class AppConfigForm extends Component {
               {...fields.issuer_uri}
               label="Issuer URI"
             />
+
           </div>
           <div className={`${baseClass}__details`}>
-            <p>The issuer URI supplied by the identity provider.</p>
+            <IconToolTip text={'The issuer URI supplied by the identity provider.'} />
           </div>
 
+
           <div className={`${baseClass}__inputs`}>
             <InputField
               {...fields.idp_image_url}
@@ -236,7 +244,7 @@ class AppConfigForm extends Component {
             />
           </div>
           <div className={`${baseClass}__details`}>
-            <p>An optional link to an image such as a logo for the identity provider.</p>
+            <IconToolTip text={'An optional link to an image such as a logo for the identity provider.'} />
           </div>
 
           <div className={`${baseClass}__inputs`}>
@@ -247,7 +255,7 @@ class AppConfigForm extends Component {
             />
           </div>
           <div className={`${baseClass}__details`}>
-            <p>Metadata provided by the identity provider. Either metadata or a metadata url must be provided.</p>
+            <IconToolTip text={'Metadata provided by the identity provider. Either metadata or a metadata url must be provided.'} />
           </div>
 
           <div className={`${baseClass}__inputs`}>
@@ -256,11 +264,11 @@ class AppConfigForm extends Component {
               label="Metadata URL"
               hint={<span>If available from the identity provider, this is the preferred means of providing metadata.</span>}
             />
+            <IconToolTip text={'A URL that references the identity provider metadata.'} />
           </div>
           <div className={`${baseClass}__details`}>
-            <p>A URL that references the identity provider metadata.</p>
+            <IconToolTip text={'A URL that references the identity provider metadata.'} />
           </div>
-
         </div>
 
         <div className={`${baseClass}__section`}>
@@ -282,8 +290,9 @@ class AppConfigForm extends Component {
             />
           </div>
           <div className={`${baseClass}__details`}>
-            <p>The sender address for emails from Fleet.</p>
+            <IconToolTip text={'The sender address for emails from Fleet.'} />
           </div>
+
           <div className={`${baseClass}__inputs ${baseClass}__inputs--smtp`}>
             <InputField
               {...fields.server}
@@ -301,8 +310,9 @@ class AppConfigForm extends Component {
             </Checkbox>
           </div>
           <div className={`${baseClass}__details`}>
-            <p>The hostname / IP address and corresponding port of your organization&apos;s SMTP server.</p>
+            <IconToolTip text={'The hostname / IP address and corresponding port of your organization&apos;s SMTP server.'} />
           </div>
+
           <div className={`${baseClass}__inputs`}>
             <Dropdown
               {...fields.authentication_type}
@@ -312,9 +322,14 @@ class AppConfigForm extends Component {
             {renderSmtpSection()}
           </div>
           <div className={`${baseClass}__details`}>
-            <p>If your mail server requires authentication, you need to specify the authentication type here.</p>
-            <p><strong>No Authentication</strong> - Select this if your SMTP is open.</p>
-            <p><strong>Username & Password</strong> - Select this if your SMTP server requires authentication with a username and password.</p>
+            <IconToolTip
+              isHtml
+              text={'\
+                <p>If your mail server requires authentication, you need to specify the authentication type here.</p> \
+                <p><strong>No Authentication</strong> - Select this if your SMTP is open.</p> \
+                <p><strong>Username & Password</strong> - Select this if your SMTP server requires authentication with a username and password.</p>\
+              '}
+            />
           </div>
         </div>
         <div className={`${baseClass}__section`}>
diff --git a/frontend/components/forms/admin/AppConfigForm/_styles.scss b/frontend/components/forms/admin/AppConfigForm/_styles.scss
index 20ea7ac61..8394b242f 100644
--- a/frontend/components/forms/admin/AppConfigForm/_styles.scss
+++ b/frontend/components/forms/admin/AppConfigForm/_styles.scss
@@ -99,9 +99,7 @@
     float: right;
     width: 40%;
 
-    p {
-      font-size: $x-small;
-      font-style: italic;
+    .icon-tooltip {
       margin: 32px 0;
     }
 
diff --git a/package.json b/package.json
index a2c036af0..60176f347 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "cypress:open": "cypress open"
   },
   "dependencies": {
+    "@types/react-tooltip": "^4.2.4",
     "ace-builds": "1.3.1",
     "autoprefixer": "^9.4.3",
     "bourbon": "^5.0.0",
@@ -51,7 +52,7 @@
     "react-select": "^1",
     "react-table": "^7.6.3",
     "react-tabs": "^3.2.0",
-    "react-tooltip": "^4.2.13",
+    "react-tooltip": "^4.2.15",
     "redux": "4.0.5",
     "redux-mock-store": "1.4.0",
     "redux-thunk": "2.3.0",
diff --git a/yarn.lock b/yarn.lock
index adfdf7ae2..e0a1d6a05 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1593,6 +1593,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-tooltip@^4.2.4":
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/@types/react-tooltip/-/react-tooltip-4.2.4.tgz#d0acad2a3061806e10aab91dd26a95a77fd35125"
+  integrity sha512-UzjzmgY/VH3Str6DcAGTLMA1mVVhGOyARNTANExrirtp+JgxhaIOVDxq4TIRmpSi4voLv+w4HA9CC5GvhhCA0A==
+  dependencies:
+    react-tooltip "*"
+
 "@types/react@*", "@types/react@^17.0.2":
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.2.tgz#3de24c4efef902dd9795a49c75f760cbe4f7a5a8"
@@ -10656,10 +10663,10 @@ react-test-renderer@^16.0.0-0:
     react-is "^16.8.6"
     scheduler "^0.13.6"
 
-react-tooltip@^4.2.13:
-  version "4.2.13"
-  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-4.2.13.tgz#908db8a41dc10ae2ae9cc1864746cde939aaab0f"
-  integrity sha512-iAZ02wSxChLWb7Vnu0zeQMyAo/jiGHrwFNILWaR3pCKaFVRjKcv/B6TBI4+Xd66xLXVzLngwJ91Tf5D+mqAqVA==
+react-tooltip@*, react-tooltip@^4.2.15:
+  version "4.2.15"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-4.2.15.tgz#ae278931a222434ae597c57aab07be215a2aa5f9"
+  integrity sha512-xmVWi6N1qsrACiAquv28jhQ10igFbQX0Xk5rjSjgUPi9BAf8lCFhYpdFXe6NrEeuPrM7hdZkePa3eS2SrIRxIw==
   dependencies:
     prop-types "^15.7.2"
     uuid "^7.0.3"