diff --git a/containers/libreportal/frontend/js/components/backup/backup-page.js b/containers/libreportal/frontend/js/components/backup/backup-page.js
index 6a0a489..c11ae2f 100644
--- a/containers/libreportal/frontend/js/components/backup/backup-page.js
+++ b/containers/libreportal/frontend/js/components/backup/backup-page.js
@@ -945,10 +945,9 @@ class BackupPage {
         block.className = 'backup-retention-preset-block';
         block.innerHTML = `
             <label class="backup-form-row">
-                <span class="backup-form-label">Backup style</span>
+                <span class="backup-form-label">Backup style <span class="tooltip" data-retention-tooltip title="${this.escape(meta?.hint || '')}">ℹ️</span></span>
                 <select class="form-control" data-backup-retention-preset>${presetOptions}</select>
             </label>
-            <div class="backup-retention-hint backup-card-hint">${this.escape(meta?.hint || '')}</div>
         `;
 
         const fieldsGrid = section.querySelector('.config-fields');
@@ -965,10 +964,10 @@ class BackupPage {
         applyVisibility(preset);
 
         const select = block.querySelector('[data-backup-retention-preset]');
-        const hintEl = block.querySelector('.backup-retention-hint');
+        const tooltipEl = block.querySelector('[data-retention-tooltip]');
         select.addEventListener('change', () => {
             const chosen = select.value;
-            hintEl.textContent = BACKUP_RETENTION_PRESET_META[chosen]?.hint || '';
+            if (tooltipEl) tooltipEl.title = BACKUP_RETENTION_PRESET_META[chosen]?.hint || '';
             applyVisibility(chosen);
             if (chosen === 'custom') return;
             const p = BACKUP_RETENTION_PRESETS[chosen];
@@ -990,6 +989,7 @@ class BackupPage {
        "Custom…" is selected. */
     formRetention(prefix, values, includeInherit = false) {
         const preset = backupRetentionDetectPreset(values, includeInherit);
+        const meta = BACKUP_RETENTION_PRESET_META[preset];
         const presetOptions = Object.entries(BACKUP_RETENTION_PRESET_META)
             .filter(([k]) => k !== 'inherit-global' || includeInherit)
             .map(([k, v]) => `<option value="${k}" ${k === preset ? 'selected' : ''}>${this.escape(v.label)}</option>`)
@@ -1002,7 +1002,7 @@ class BackupPage {
         return `
             <div class="backup-form-grid backup-retention-block" data-retention-prefix="${this.escape(prefix)}" data-retention-allow-inherit="${includeInherit ? '1' : '0'}">
                 <label class="backup-form-row">
-                    <span class="backup-form-label">Backup style <span class="tooltip" title="Use whatever the Configuration tab specifies. Pick something else here only when this location needs a different policy.">ℹ️</span></span>
+                    <span class="backup-form-label">Backup style <span class="tooltip" data-retention-tooltip title="${this.escape(meta?.hint || '')}">ℹ️</span></span>
                     <select class="form-control" data-retention-preset>${presetOptions}</select>
                 </label>
                 ${customRetentionHidden}
@@ -1026,6 +1026,8 @@ class BackupPage {
         const prefix = block.dataset.retentionPrefix;
         const allowInherit = block.dataset.retentionAllowInherit === '1';
         const preset = selectEl.value;
+        const tooltipEl = block.querySelector('[data-retention-tooltip]');
+        if (tooltipEl) tooltipEl.title = BACKUP_RETENTION_PRESET_META[preset]?.hint || '';
 
         if (preset === 'custom') {
             if (advanced) advanced.hidden = false;