diff --git a/gui-tests/crate-sizes.goml b/gui-tests/crate-sizes.goml
new file mode 100644
index 000000000..783a3790f
--- /dev/null
+++ b/gui-tests/crate-sizes.goml
@@ -0,0 +1,37 @@
+// Checks that the size popup work as expected.
+go-to: |DOC_PATH| + "/crate/sysinfo/latest"
+// By default, they're hidden.
+assert-css: (
+    "div.package-page-container div.package-menu .documented-info .size .info",
+    {"display": "none"},
+)
+// When we hover the parent element, it should make them appear.
+move-cursor-to: "div.package-page-container div.package-menu .documented-info .size"
+wait-for-css: (
+    "div.package-page-container div.package-menu .documented-info .size .info",
+    {"display": "block"},
+)
+// And when we move the mouse cursor away, it's hidden again.
+move-cursor-to: "#clipboard"
+assert-css: (
+    "div.package-page-container div.package-menu .documented-info .size .info",
+    {"display": "none"},
+)
+
+// When clicked, the popup should remain visible.
+click: "div.package-page-container div.package-menu .documented-info .size"
+wait-for-css: (
+    "div.package-page-container div.package-menu .documented-info .size .info",
+    {"display": "block"},
+)
+move-cursor-to: "#clipboard"
+assert-css: (
+    "div.package-page-container div.package-menu .documented-info .size .info",
+    {"display": "block"},
+)
+// Clicking somewhere else will change focus, making the popup disappear.
+click: "#main"
+wait-for-css: (
+    "div.package-page-container div.package-menu .documented-info .size .info",
+    {"display": "none"},
+)
diff --git a/templates/crate/details.html b/templates/crate/details.html
index 9752cd9f6..e2ae588cb 100644
--- a/templates/crate/details.html
+++ b/templates/crate/details.html
@@ -40,11 +40,17 @@
                         {%- if let Some(source_size) = source_size -%}
                             <li class="pure-menu-heading">Size</li>
                             <li class="pure-menu-item">
-                                <span class="documented-info">Source code size: {{(*source_size)|filesizeformat}}</span>
+                                <span class="documented-info">Source code size: {{(*source_size)|filesizeformat}} <span class="size" tabindex=0>
+                                    {{- crate::icons::IconCircleInfo.render_solid(false, false, "") -}}
+                                    <span class="info">This is the summed size of all the files inside the crates.io package for this release.</span>
+                                </span>
                             </li>
                             {%- if let Some(doc_size) = documentation_size -%}
                                 <li class="pure-menu-item">
-                                    <span class="documented-info">Documentation size: {{(*doc_size)|filesizeformat}}</span>
+                                    <span class="documented-info">Documentation size: {{(*doc_size)|filesizeformat}} <span class="size" tabindex=0>
+                                        {{- crate::icons::IconCircleInfo.render_solid(false, false, "") -}}
+                                        <span class="info">This is the summed size of all files generated by rustdoc for all configured targets</span>
+                                </span>
                                 </li>
                             {%- endif -%}
                         {%- endif -%}
diff --git a/templates/style/style.scss b/templates/style/style.scss
index 21832fff8..77c69ce9d 100644
--- a/templates/style/style.scss
+++ b/templates/style/style.scss
@@ -479,6 +479,20 @@ div.package-page-container {
             width: 100%;
         }
 
+        .documented-info .size .info {
+            display: none;
+            position: absolute;
+            top: 90%;
+            background: var(--color-background-code);
+            z-index: 1;
+            border: 1px solid var(--color-menu-border);
+        }
+
+        .documented-info .size:hover .info,
+        .documented-info .size:focus .info {
+            display: block;
+        }
+
         li.pure-menu-heading:first-child {
             margin-top: 0;
         }