diff --git a/javascript/sdnext.css b/javascript/sdnext.css
index af5b39464..4ac257c89 100644
--- a/javascript/sdnext.css
+++ b/javascript/sdnext.css
@@ -602,6 +602,7 @@ div#extras_scale_to_tab div.form {
   display: block;
   font-size: var(--text-xs);
   min-height: 1.3em;
+  max-width: 40em;
   opacity: 0;
   padding: 0.5em;
   pointer-events: none;
@@ -611,12 +612,87 @@ div#extras_scale_to_tab div.form {
   transition: opacity 0.2s ease-in;
   width: 22em;
   z-index: 999;
+  overflow: visible;
 }
 
 .tooltip-show {
   opacity: 0.9;
 }
 
+.tooltip-expanded {
+  width: 32em;
+}
+
+.tooltip .separator {
+  display: block;
+  height: 1px;
+  background: linear-gradient(to right, transparent, var(--button-primary-border-color), transparent);
+  margin: 0.5em 0;
+  opacity: 0.6;
+}
+
+.tooltip .long-content {
+  opacity: 0;
+  max-height: 0;
+  overflow: hidden;
+  transition: opacity 0.3s ease-in, max-height 0.3s ease-in-out;
+}
+
+.tooltip .long-content.show {
+  opacity: 1;
+  max-height: 50em;
+}
+
+.tooltip-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.tooltip-progress-ring {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1.2em;
+  height: 1.2em;
+  opacity: 0;
+  transition: opacity 0.2s ease-in;
+  flex-shrink: 0;
+}
+
+.tooltip-progress-ring.active {
+  opacity: 0.8;
+}
+
+.tooltip-progress-ring svg {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+
+.tooltip-progress-ring .ring-background {
+  fill: none;
+  stroke: var(--button-primary-border-color);
+  stroke-width: 2;
+  opacity: 0.3;
+}
+
+.tooltip-progress-ring .ring-progress {
+  fill: none;
+  stroke: var(--body-text-color);
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-dasharray: 31.4; /* Circumference of circle with radius 5 (2πr = 2π×5 ≈ 31.4) */
+  stroke-dashoffset: 31.4;
+  transition: stroke-dashoffset 3s linear;
+}
+
+.tooltip-progress-ring .ring-progress.animate {
+  stroke-dashoffset: 0;
+}
+
 .toolbutton-selected {
   background: var(--background-fill-primary) !important;
 }
@@ -680,19 +756,8 @@ div#extras_scale_to_tab div.form {
 
 #quicksettings>button {
   align-self: end;
-  height: 1.3em;
-  margin: 0em 0.7em 0.3em -0.5em;
-  line-height: 1em;
-  background-color: var(--background-fill-primary);
-}
-
-#quicksettings>button:hover {
-  background-color: var(--button-cancel-border-color-hover);
-}
-
-button#quicksettings_reset {
-  position: absolute;
-  right: 0;
+  margin-bottom: 6px;
+  padding: 0 1em 0 0;
 }
 
 #settings {
diff --git a/javascript/setHints.js b/javascript/setHints.js
index 086367a6e..e135f16d4 100644
--- a/javascript/setHints.js
+++ b/javascript/setHints.js
@@ -9,6 +9,8 @@ const localeData = {
   type: 2,
   hint: null,
   btn: null,
+  expandTimeout: null, // New property for expansion timeout
+  currentElement: null, // Track current element for expansion
 };
 
 async function cycleLocale() {
@@ -44,20 +46,103 @@ async function tooltipCreate() {
   if (window.opts.tooltips === 'UI tooltips') localeData.type = 2;
 }
 
+async function expandTooltip(element, longHint) {
+  if (localeData.currentElement === element && localeData.hint.classList.contains('tooltip-show')) {
+    // Hide the progress ring
+    const ring = localeData.hint.querySelector('.tooltip-progress-ring');
+    if (ring) {
+      ring.style.opacity = '0';
+    }
+
+    // Expand the container
+    localeData.hint.classList.add('tooltip-expanded');
+
+    // After container starts expanding, reveal the long content
+    setTimeout(() => {
+      const longContent = localeData.hint.querySelector('.long-content');
+      if (longContent) {
+        longContent.classList.add('show');
+      }
+    }, 100);
+  }
+}
+
 async function tooltipShow(e) {
+  // Clear any existing expansion timeout
+  if (localeData.expandTimeout) {
+    clearTimeout(localeData.expandTimeout);
+    localeData.expandTimeout = null;
+  }
+
+  // Remove expanded class and reset current element
+  localeData.hint.classList.remove('tooltip-expanded');
+  localeData.currentElement = e.target;
+
   if (e.target.dataset.hint) {
+    // Create progress ring SVG
+    const progressRing = `
+      <div class="tooltip-progress-ring">
+        <svg viewBox="0 0 12 12">
+          <circle class="ring-background" cx="6" cy="6" r="5"></circle>
+          <circle class="ring-progress" cx="6" cy="6" r="5"></circle>
+        </svg>
+      </div>
+    `;
+
+    // Set up the complete content structure from the start
+    let content = `
+      <div class="tooltip-header">
+        <b>${e.target.textContent}</b>
+        ${e.target.dataset.longHint ? progressRing : ''}
+      </div>
+      <div class="separator"></div>
+      ${e.target.dataset.hint}
+    `;
+
+    // Add long content if available, but keep it hidden
+    if (e.target.dataset.longHint) {
+      content += `<div class="long-content"><div class="separator"></div>${e.target.dataset.longHint}</div>`;
+    }
+
+    localeData.hint.innerHTML = content;
     localeData.hint.classList.add('tooltip-show');
-    localeData.hint.innerHTML = `<b>${e.target.textContent}</b><br>${e.target.dataset.hint}`;
+
     if (e.clientX > window.innerWidth / 2) {
       localeData.hint.classList.add('tooltip-left');
     } else {
       localeData.hint.classList.remove('tooltip-left');
     }
+
+    // Set up expansion timer if long hint is available
+    if (e.target.dataset.longHint) {
+      // Start progress ring animation
+      const ring = localeData.hint.querySelector('.tooltip-progress-ring');
+      const ringProgress = localeData.hint.querySelector('.ring-progress');
+
+      if (ring && ringProgress) {
+        // Show the ring and start animation
+        setTimeout(() => {
+          ring.classList.add('active');
+          ringProgress.classList.add('animate');
+        }, 100);
+      }
+
+      localeData.expandTimeout = setTimeout(() => {
+        expandTooltip(e.target, e.target.dataset.longHint);
+      }, 3000);
+    }
   }
 }
 
 async function tooltipHide(e) {
-  localeData.hint.classList.remove('tooltip-show');
+  // Clear expansion timeout when hiding
+  if (localeData.expandTimeout) {
+    clearTimeout(localeData.expandTimeout);
+    localeData.expandTimeout = null;
+  }
+
+  localeData.hint.classList.remove('tooltip-show', 'tooltip-expanded');
+  localeData.currentElement = null;
 }
 
 async function validateHints(json, elements) {
@@ -85,7 +170,7 @@ async function addMissingHints(json, missingHints) {
   json.missing = [];
   for (const h of missingHints.sort()) {
     if (h.length <= 1) continue;
-    json.missing.push({ id: '', label: h, localized: '', hint: h });
+    json.missing.push({ id: '', label: h, localized: '', hint: h, longHint: '' }); // Add longHint property
   }
   log('missing hints', missingHints);
   log('added missing hints:', { missing: json.missing });
@@ -192,6 +277,10 @@ async function setHints(analyze = false) {
         el.title = found.hint;
       } else if (localeData.type === 2) {
         el.dataset.hint = found.hint;
+        // Set long hint if available
+        if (found.longHint && found.longHint.length > 0) {
+          el.dataset.longHint = found.longHint;
+        }
         el.addEventListener('mouseover', tooltipShow);
         el.addEventListener('mouseout', tooltipHide);
       } else {