diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index bce3d16..0825d9f 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -74,4 +74,10 @@ code {
     @extend .pb-3;
     width: 100%;
     max-width: 1000px;
+}
+
+/* Gateway hop list tooltip (data-bs-custom-class on the badge trigger) */
+.tooltip.tooltip-gateway-list .tooltip-inner {
+    max-width: 500px;
+    text-align: left;
 }
\ No newline at end of file
diff --git a/static/js/messages.js b/static/js/messages.js
index 897086d..e15dbb3 100644
--- a/static/js/messages.js
+++ b/static/js/messages.js
@@ -199,7 +199,9 @@ document.addEventListener("DOMContentLoaded", async function () {
         if (!names) {
             return "";
         }
-        return `Gated by: ${names}`;
+        const titleEsc = document.createElement("span");
+        titleEsc.textContent = names;
+        return `Gated by: <span class="badge rounded-pill text-bg-light" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-container="body" data-bs-custom-class="tooltip-gateway-list" data-bs-trigger="hover focus" title="${titleEsc.innerHTML}">${sorted.length}</span>`;
     }
 
     await fetchMessages();