[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

1 files changed, 13 insertions, 0 deletions

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index e7c1e91b8..896f92008 100644
--- 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;