From b86bdf9dc81992d3fa32819e7826f3d8c7bf9e23 Mon Sep 17 00:00:00 2001 From: fxd-jason Date: Thu, 7 May 2026 11:33:11 +0800 Subject: [PATCH 1/2] fix(ux): replace native title tooltips with custom CSS tooltips (#1775) - Add .has-tooltip CSS utility class with 300ms delay (vs ~1500ms native) - Position-aware: right side for rail buttons, bottom for nav/panel buttons - Arrow indicator pointing back at trigger element - :focus-visible support for keyboard accessibility - prefers-reduced-motion: no animation for users who opt out - Replace native title="" with data-tooltip="" on all rail-btn, sidebar nav-tab, and panel-head-btn elements in index.html - Sync data-tooltip via data-i18n-title handler for locale switching - 17 tests covering HTML coverage, CSS class definitions, and i18n sync Closes #1775 --- static/i18n.js | 2 + static/index.html | 122 +++++++-------- static/style.css | 19 ++- tests/test_css_tooltips.py | 313 +++++++++++++++++++++++++++++++++++++ 4 files changed, 391 insertions(+), 65 deletions(-) create mode 100644 tests/test_css_tooltips.py diff --git a/static/i18n.js b/static/i18n.js index e0be3a13..e4e78e60 100644 --- a/static/i18n.js +++ b/static/i18n.js @@ -8742,6 +8742,8 @@ function applyLocaleToDOM() { const key = el.getAttribute('data-i18n-title'); const val = t(key); if (val && val !== key) el.title = val; + // Sync custom data-tooltip when present (replaces native title for faster display, #1775). + if (el.hasAttribute('data-tooltip') && val && val !== key) el.setAttribute('data-tooltip', val); }); document.querySelectorAll('[data-i18n-placeholder]').forEach(el => { const key = el.getAttribute('data-i18n-placeholder'); diff --git a/static/index.html b/static/index.html index 1561eca2..6ecd26ab 100644 --- a/static/index.html +++ b/static/index.html @@ -61,7 +61,7 @@