[WebUI] Rework symbol description display on hover

- Replaced 'abbr title' with dynamic description display on hover or focus
- Added tabindex for keyboard accessibility
- Improved symbol rendering using template literals for readability

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index e7c1e91b84ccf120d35c48cf893b9e9224fbfee7..896f9200884ec56fbcf41d18d94eba84e438c858 100644 (file)
--- a/interface/css/rspamd.css
+++ b/interface/css/rspamd.css
@@ -265,6 +265,19 @@ table#symbolsTable input[type="number"] {
     background-color: #cddbff;
 }
 
+/* For symbol description display on hover/focus */
+.symbol-default.has-description:not(:focus) strong {
+    text-decoration: underline dotted;
+}
+.symbol-description {
+    display: none;
+    color: #484848;
+}
+.symbol-default:hover .symbol-description,
+.symbol-default:focus .symbol-description {
+    display: unset;
+}
+
 .map-link {
     display: block;
     color: #0088cc;

diff --git a/interface/js/app/libft.js b/interface/js/app/libft.js
index 84ee2667e7b372e770b6756a5d81c427b661bf01..7106516a2b8179c82c38e1a5e21637db45fb4fb4 100644 (file)
--- a/interface/js/app/libft.js
+++ b/interface/js/app/libft.js
@@ -573,17 +573,15 @@ define(["jquery", "app/common", "footable"],
 
                     ui.preprocess_item(item);
                     Object.values(item.symbols).forEach((sym) => {
-                        sym.str = '<span class="symbol-default ' + get_symbol_class(sym.name, sym.score) + '"><strong>';
-
-                        if (sym.description) {
-                            sym.str += '<abbr title="' + sym.description + '">' + sym.name + "</abbr>";
-                        } else {
-                            sym.str += sym.name;
-                        }
-                        sym.str += "</strong> (" + sym.score + ")</span>";
+                        sym.str = `
+<span class="symbol-default ${get_symbol_class(sym.name, sym.score)} ${sym.description ? "has-description" : ""}" tabindex="0">
+    <strong>${sym.name}</strong>
+    ${sym.description ? `<span class="symbol-description"> • ${sym.description}</span>` : ""}
+    (${sym.score})
+</span>`;
 
                         if (sym.options) {
-                            sym.str += " [" + sym.options.join(",") + "]";
+                            sym.str += ` [${sym.options.join(",")}]`;
                         }
                     });
                     unsorted_symbols.push(item.symbols);