diff --git a/package-lock.json b/package-lock.json
index 996c1422d..ce14a73c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6365,8 +6365,7 @@
     "@popperjs/core": {
       "version": "2.5.4",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.5.4.tgz",
-      "integrity": "sha512-ZpKr+WTb8zsajqgDkvCEWgp6d5eJT6Q63Ng2neTbzBO76Lbe91vX/iVIW9dikq+Fs3yEo+ls4cxeXABD2LtcbQ==",
-      "dev": true
+      "integrity": "sha512-ZpKr+WTb8zsajqgDkvCEWgp6d5eJT6Q63Ng2neTbzBO76Lbe91vX/iVIW9dikq+Fs3yEo+ls4cxeXABD2LtcbQ=="
     },
     "@reach/router": {
       "version": "1.3.3",
@@ -30267,6 +30266,14 @@
         }
       }
     },
+    "sveltejs-tippy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/sveltejs-tippy/-/sveltejs-tippy-3.0.0.tgz",
+      "integrity": "sha512-LAfQikm61AeqZW1hCFWUsmGEMmhMHDvrPV0JhbT38Ell9SqBjmFaY//+YKUxaJvx6nLMxGQdlcHA1rDg2Ml8tQ==",
+      "requires": {
+        "tippy.js": "~6.0.1"
+      }
+    },
     "svgo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@@ -31007,6 +31014,14 @@
       "resolved": "https://registry.npmjs.org/tinydate/-/tinydate-1.3.0.tgz",
       "integrity": "sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w=="
     },
+    "tippy.js": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.0.3.tgz",
+      "integrity": "sha512-buQF6HugTA4YeSA/s9xBhu0ferEAx7sRSn45G+Juh3p+Dz3vEKfxtqdg6JUnHIWDCV/r0u8Lrobs9AB4dtYcUQ==",
+      "requires": {
+        "@popperjs/core": "^2.1.0"
+      }
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
diff --git a/package.json b/package.json
index 374596dbd..3bfe2f1d2 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "postcss-load-config": "^3.0.0",
     "sirv-cli": "1.0.10",
     "svelte-preprocess": "^4.6.1",
+    "sveltejs-tippy": "^3.0.0",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
index d8b4ccef1..2e43b7716 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,5 +1,6 @@
 import replace from "@rollup/plugin-replace";
 import svelte from "rollup-plugin-svelte";
+import postcss from "rollup-plugin-postcss";
 import resolve from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
 import livereload from "rollup-plugin-livereload";
@@ -39,6 +40,9 @@ export default {
     file: "public/build/bundle.js",
   },
   plugins: [
+    postcss({
+      plugins: [],
+    }),
     svelte({
       // enable run-time checks when not in production
       dev: !production,
@@ -56,6 +60,10 @@ export default {
       __VERSION__: execSync("git rev-list HEAD --max-count=1")
         .toString()
         .trim(),
+      // workaround the way sveltejs-tippy imports tippy: https://github.com/mdauner/sveltejs-tippy/issues/117
+      "process.env.NODE_ENV": JSON.stringify(
+        production ? "production" : "development"
+      ),
     }),
     // If you have external dependencies installed from
     // npm, you'll most likely need these plugins. In
diff --git a/src/components/HelpHoverable.svelte b/src/components/HelpHoverable.svelte
new file mode 100644
index 000000000..3b3af0298
--- /dev/null
+++ b/src/components/HelpHoverable.svelte
@@ -0,0 +1,25 @@
+<script>
+  import tippy from "sveltejs-tippy";
+  import InfoIcon from "./icons/InfoIcon.svelte";
+
+  export let content;
+  export let link;
+  let props = {
+    content,
+    allowHTML: true,
+    placement: "top",
+  };
+</script>
+
+<style>
+  .main {
+    @apply inline-block;
+    @apply text-gray-500;
+  }
+</style>
+
+<div class="main">
+  <a href={link} use:tippy={props}>
+    <InfoIcon />
+  </a>
+</div>
diff --git a/src/components/icons/InfoIcon.svelte b/src/components/icons/InfoIcon.svelte
new file mode 100644
index 000000000..69c8fb0dd
--- /dev/null
+++ b/src/components/icons/InfoIcon.svelte
@@ -0,0 +1,10 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 20 20"
+  fill="currentColor"
+  class="w-5 inline-block">
+  <path
+    fill-rule="evenodd"
+    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+    clip-rule="evenodd" />
+</svg>
diff --git a/src/data/help.js b/src/data/help.js
new file mode 100644
index 000000000..4a5f3b2b7
--- /dev/null
+++ b/src/data/help.js
@@ -0,0 +1,17 @@
+export default {
+  bugs: {
+    text:
+      "Required. A list of bugs (e.g. Bugzilla or GitHub) that are relevant to this metric. For example, bugs that track its original implementation or later changes to it.",
+    link: "https://mozilla.github.io/glean/book/user/metric-parameters.html",
+  },
+  lifetime: {
+    text:
+      "Defines the lifetime of the metric. Different lifetimes affect when the metrics value is reset.",
+    link: "https://mozilla.github.io/glean/book/user/metric-parameters.html",
+  },
+  send_in_pings: {
+    text:
+      "Defines which pings the metric should be sent on. If not specified, the metric is sent on the 'default ping', which is the events ping for events and the metrics ping for everything else. Most metrics don't need to specify this unless they are sent on custom pings.",
+    link: "https://mozilla.github.io/glean/book/user/metric-parameters.html",
+  },
+};
diff --git a/src/pages/MetricDetail.svelte b/src/pages/MetricDetail.svelte
index 396e389be..5c356b827 100644
--- a/src/pages/MetricDetail.svelte
+++ b/src/pages/MetricDetail.svelte
@@ -1,9 +1,10 @@
 <script>
   import { getMetricData } from "../state/api";
   import { getMetricBigQueryURL } from "../state/urls";
-
   import Markdown from "../components/Markdown.svelte";
   import NotFound from "../components/NotFound.svelte";
+  import HelpHoverable from "../components/HelpHoverable.svelte";
+  import helpText from "../data/help";
 
   export let params;
   let metricName = params.metric.replaceAll("-", ".");
@@ -76,7 +77,10 @@
   </p>
   <table class="metrics-table">
     <tr>
-      <td>Relevant Bugs</td>
+      <td>
+        Relevant Bugs
+        <HelpHoverable content={helpText.bugs.text} link={helpText.bugs.link} />
+      </td>
       <td>
         {#each metric.bugs as bug}
           <a
@@ -89,7 +93,12 @@
       </td>
     </tr>
     <tr>
-      <td>Send In Pings</td>
+      <td>
+        Send In Pings
+        <HelpHoverable
+          content={helpText.send_in_pings.text}
+          link={helpText.send_in_pings.link} />
+      </td>
       <td>
         {#each metric.send_in_pings as name}
           <a href={`/apps/${params.app}/pings/${name}`}> {name} </a>
@@ -104,6 +113,9 @@
             target="_blank">
             Lifetime
           </a>
+          <HelpHoverable
+            content={helpText.lifetime.text}
+            link={helpText.lifetime.link} />
         </td>
         <td>{metric.lifetime}</td>
       </tr>