From 00792822385d1de0c72e529a0a2ab6ddc8bd9f7c Mon Sep 17 00:00:00 2001
From: Roslund <anton@roslund.nu>
Date: Wed, 8 Apr 2026 19:29:58 +0200
Subject: [PATCH] Add tooltip for gateway hop list

---
 assets/scss/_styles_project.scss | 6 ++++++
 static/js/messages.js            | 4 +++-
 2 files changed, 9 insertions(+), 1 deletion(-)

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();