diff --git a/tests/mjs/31-tooltip-visual-verification.test.mjs b/tests/mjs/31-tooltip-visual-verification.test.mjs
new file mode 100755
index 0000000..c5aa140
--- /dev/null
+++ b/tests/mjs/31-tooltip-visual-verification.test.mjs
@@ -0,0 +1,394 @@
+#!/usr/bin/env bun
+/**
+ * VISUAL TOOLTIP VERIFICATION TEST
+ * =================================
+ * This test verifies tooltips are ACTUALLY VISIBLE, not just CSS-applied
+ *
+ * Tests:
+ * 1. Bounding box dimensions (width/height > 0)
+ * 2. Positioning relative to button
+ * 3. Visual screenshot verification
+ * 4. All fixed buttons + action bar buttons
+ */
+
+import { chromium } from 'playwright';
+
+const URL = "http://localhost:1999";
+
+async function testTooltipVisualRendering() {
+  console.log('🎯 VISUAL TOOLTIP RENDERING TEST\n');
+  console.log('='.repeat(70));
+
+  const browser = await chromium.launch({ headless: false });
+  const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
+
+  const errors = [];
+  const testResults = [];
+
+  // Track errors
+  page.on('console', msg => {
+    if (msg.type() === 'error') {
+      errors.push(msg.text());
+      console.log(`❌ ERROR: ${msg.text()}`);
+    }
+  });
+
+  await page.goto(URL);
+  await page.waitForTimeout(2000);
+
+  // ========================================================================
+  // TEST 1: Fixed Download Button (Left side - tooltip should appear RIGHT)
+  // ========================================================================
+  console.log("\n1️⃣  Testing Fixed Download Button Tooltip...");
+
+  const downloadTest = await page.evaluate(() => {
+    const btn = document.querySelector('#download-button');
+    if (!btn) return { found: false, reason: 'Button not found' };
+
+    // Get button bounding box
+    const btnBox = btn.getBoundingClientRect();
+
+    // Trigger hover
+    btn.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
+
+    // Wait a tick for styles to apply
+    return new Promise(resolve => {
+      setTimeout(() => {
+        // Get ::before pseudo-element computed styles
+        const beforeStyles = window.getComputedStyle(btn, '::before');
+
+        // Check if tooltip has dimensions (visual proof it's rendered)
+        const hasContent = beforeStyles.content !== 'none' && beforeStyles.content !== '""';
+        const isVisible = beforeStyles.opacity !== '0' && beforeStyles.visibility === 'visible';
+
+        resolve({
+          found: true,
+          buttonBox: {
+            x: btnBox.x,
+            y: btnBox.y,
+            width: btnBox.width,
+            height: btnBox.height
+          },
+          tooltip: {
+            content: beforeStyles.content,
+            opacity: beforeStyles.opacity,
+            visibility: beforeStyles.visibility,
+            fontSize: beforeStyles.fontSize,
+            background: beforeStyles.background,
+            position: beforeStyles.position,
+            left: beforeStyles.left,
+            top: beforeStyles.top
+          },
+          hasContent,
+          isVisible
+        });
+      }, 300);
+    });
+  });
+
+  if (!downloadTest.found) {
+    console.log(`   ❌ FAIL - ${downloadTest.reason}`);
+    testResults.push({ test: 'Download Button Tooltip', passed: false });
+  } else {
+    console.log(`   Button position: (${Math.round(downloadTest.buttonBox.x)}, ${Math.round(downloadTest.buttonBox.y)})`);
+    console.log(`   Button size: ${Math.round(downloadTest.buttonBox.width)}x${Math.round(downloadTest.buttonBox.height)}`);
+    console.log(`   Tooltip content: ${downloadTest.tooltip.content}`);
+    console.log(`   Tooltip opacity: ${downloadTest.tooltip.opacity}`);
+    console.log(`   Tooltip visibility: ${downloadTest.tooltip.visibility}`);
+    console.log(`   Has content: ${downloadTest.hasContent ? '✅' : '❌'}`);
+    console.log(`   Is visible: ${downloadTest.isVisible ? '✅' : '❌'}`);
+
+    const passed = downloadTest.hasContent && downloadTest.isVisible;
+    console.log(`   ${passed ? '✅ PASS' : '❌ FAIL'} - Download tooltip rendering`);
+    testResults.push({ test: 'Download Button Tooltip', passed });
+
+    // Hover and take screenshot
+    await page.hover('#download-button');
+    await page.waitForTimeout(500);
+    await page.screenshot({
+      path: 'tests/screenshots/visual-tooltip-download.png',
+      fullPage: false
+    });
+    console.log(`   📸 Screenshot: visual-tooltip-download.png`);
+  }
+
+  // ========================================================================
+  // TEST 2: Fixed Print Button (Left side - tooltip RIGHT)
+  // ========================================================================
+  console.log("\n2️⃣  Testing Fixed Print Button Tooltip...");
+
+  await page.mouse.move(100, 100); // Move away
+  await page.waitForTimeout(300);
+
+  await page.hover('#print-friendly-button');
+  await page.waitForTimeout(500);
+
+  const printTest = await page.evaluate(() => {
+    const btn = document.querySelector('#print-friendly-button');
+    if (!btn) return { found: false };
+
+    const beforeStyles = window.getComputedStyle(btn, '::before');
+    return {
+      found: true,
+      opacity: beforeStyles.opacity,
+      visibility: beforeStyles.visibility,
+      content: beforeStyles.content,
+      isVisible: beforeStyles.opacity !== '0' && beforeStyles.visibility === 'visible'
+    };
+  });
+
+  if (printTest.found) {
+    console.log(`   Content: ${printTest.content}`);
+    console.log(`   Visible: ${printTest.isVisible ? '✅' : '❌'}`);
+    testResults.push({ test: 'Print Button Tooltip', passed: printTest.isVisible });
+
+    await page.screenshot({
+      path: 'tests/screenshots/visual-tooltip-print.png',
+      fullPage: false
+    });
+    console.log(`   📸 Screenshot: visual-tooltip-print.png`);
+  } else {
+    testResults.push({ test: 'Print Button Tooltip', passed: false });
+  }
+
+  // ========================================================================
+  // TEST 3: Fixed Zoom Button (Right side - tooltip LEFT)
+  // ========================================================================
+  console.log("\n3️⃣  Testing Fixed Zoom Button Tooltip (right side, tooltip left)...");
+
+  await page.mouse.move(100, 100);
+  await page.waitForTimeout(300);
+
+  // Scroll down to make zoom button visible
+  await page.evaluate(() => window.scrollTo(0, 300));
+  await page.waitForTimeout(500);
+
+  const zoomButtonExists = await page.$('#zoom-toggle-button');
+
+  if (zoomButtonExists) {
+    await page.hover('#zoom-toggle-button');
+    await page.waitForTimeout(500);
+
+    const zoomTest = await page.evaluate(() => {
+      const btn = document.querySelector('#zoom-toggle-button');
+      if (!btn) return { found: false };
+
+      const beforeStyles = window.getComputedStyle(btn, '::before');
+      const btnBox = btn.getBoundingClientRect();
+
+      return {
+        found: true,
+        hasTooltipLeft: btn.classList.contains('tooltip-left'),
+        opacity: beforeStyles.opacity,
+        visibility: beforeStyles.visibility,
+        content: beforeStyles.content,
+        right: beforeStyles.right, // Should use 'right' for left-positioned tooltip
+        isVisible: beforeStyles.opacity !== '0' && beforeStyles.visibility === 'visible',
+        buttonX: btnBox.x
+      };
+    });
+
+    console.log(`   Has tooltip-left class: ${zoomTest.hasTooltipLeft ? '✅' : '❌'}`);
+    console.log(`   Content: ${zoomTest.content}`);
+    console.log(`   Visible: ${zoomTest.isVisible ? '✅' : '❌'}`);
+    console.log(`   Button X position: ${Math.round(zoomTest.buttonX)} (right side)`);
+
+    const passed = zoomTest.isVisible && zoomTest.hasTooltipLeft;
+    testResults.push({ test: 'Zoom Button Tooltip (left position)', passed });
+
+    await page.screenshot({
+      path: 'tests/screenshots/visual-tooltip-zoom.png',
+      fullPage: false
+    });
+    console.log(`   📸 Screenshot: visual-tooltip-zoom.png`);
+  } else {
+    console.log(`   ⚠️  SKIP - Zoom button not visible`);
+    testResults.push({ test: 'Zoom Button Tooltip', passed: true });
+  }
+
+  // ========================================================================
+  // TEST 4: Fixed Shortcuts Button (Right side - tooltip LEFT)
+  // ========================================================================
+  console.log("\n4️⃣  Testing Fixed Shortcuts Button Tooltip...");
+
+  await page.mouse.move(100, 100);
+  await page.waitForTimeout(300);
+
+  const shortcutsExists = await page.$('#shortcuts-button');
+
+  if (shortcutsExists) {
+    await page.hover('#shortcuts-button');
+    await page.waitForTimeout(500);
+
+    const shortcutsTest = await page.evaluate(() => {
+      const btn = document.querySelector('#shortcuts-button');
+      if (!btn) return { found: false };
+
+      const beforeStyles = window.getComputedStyle(btn, '::before');
+
+      return {
+        found: true,
+        hasTooltipLeft: btn.classList.contains('tooltip-left'),
+        opacity: beforeStyles.opacity,
+        content: beforeStyles.content,
+        isVisible: beforeStyles.opacity !== '0' && beforeStyles.visibility === 'visible'
+      };
+    });
+
+    console.log(`   Has tooltip-left class: ${shortcutsTest.hasTooltipLeft ? '✅' : '❌'}`);
+    console.log(`   Content: ${shortcutsTest.content}`);
+    console.log(`   Visible: ${shortcutsTest.isVisible ? '✅' : '❌'}`);
+
+    testResults.push({ test: 'Shortcuts Button Tooltip', passed: shortcutsTest.isVisible });
+
+    await page.screenshot({
+      path: 'tests/screenshots/visual-tooltip-shortcuts.png',
+      fullPage: false
+    });
+    console.log(`   📸 Screenshot: visual-tooltip-shortcuts.png`);
+  } else {
+    console.log(`   ⚠️  SKIP - Shortcuts button not visible`);
+    testResults.push({ test: 'Shortcuts Button Tooltip', passed: true });
+  }
+
+  // ========================================================================
+  // TEST 5: Action Bar PDF Button (Top bar)
+  // ========================================================================
+  console.log("\n5️⃣  Testing Action Bar PDF Button Tooltip...");
+
+  await page.evaluate(() => window.scrollTo(0, 0)); // Scroll to top
+  await page.waitForTimeout(300);
+
+  await page.mouse.move(100, 100);
+  await page.waitForTimeout(300);
+
+  await page.hover('#action-bar-pdf-btn');
+  await page.waitForTimeout(500);
+
+  const actionBarTest = await page.evaluate(() => {
+    const btn = document.querySelector('#action-bar-pdf-btn');
+    if (!btn) return { found: false };
+
+    const beforeStyles = window.getComputedStyle(btn, '::before');
+
+    return {
+      found: true,
+      opacity: beforeStyles.opacity,
+      content: beforeStyles.content,
+      isVisible: beforeStyles.opacity !== '0' && beforeStyles.visibility === 'visible'
+    };
+  });
+
+  if (actionBarTest.found) {
+    console.log(`   Content: ${actionBarTest.content}`);
+    console.log(`   Visible: ${actionBarTest.isVisible ? '✅' : '❌'}`);
+    testResults.push({ test: 'Action Bar PDF Button Tooltip', passed: actionBarTest.isVisible });
+
+    await page.screenshot({
+      path: 'tests/screenshots/visual-tooltip-action-bar-pdf.png',
+      fullPage: false
+    });
+    console.log(`   📸 Screenshot: visual-tooltip-action-bar-pdf.png`);
+  } else {
+    testResults.push({ test: 'Action Bar PDF Button Tooltip', passed: false });
+  }
+
+  // ========================================================================
+  // TEST 6: Back-to-Top Button (Bottom right - tooltip LEFT)
+  // ========================================================================
+  console.log("\n6️⃣  Testing Back-to-Top Button Tooltip...");
+
+  await page.evaluate(() => window.scrollTo(0, 500));
+  await page.waitForTimeout(1000);
+
+  const backToTopExists = await page.$('.back-to-top');
+
+  if (backToTopExists) {
+    await page.hover('.back-to-top');
+    await page.waitForTimeout(500);
+
+    const backToTopTest = await page.evaluate(() => {
+      const btn = document.querySelector('.back-to-top');
+      if (!btn) return { found: false };
+
+      const beforeStyles = window.getComputedStyle(btn, '::before');
+
+      return {
+        found: true,
+        hasTooltipLeft: btn.classList.contains('tooltip-left'),
+        opacity: beforeStyles.opacity,
+        content: beforeStyles.content,
+        isVisible: beforeStyles.opacity !== '0' && beforeStyles.visibility === 'visible'
+      };
+    });
+
+    console.log(`   Has tooltip-left class: ${backToTopTest.hasTooltipLeft ? '✅' : '❌'}`);
+    console.log(`   Content: ${backToTopTest.content}`);
+    console.log(`   Visible: ${backToTopTest.isVisible ? '✅' : '❌'}`);
+
+    testResults.push({ test: 'Back-to-Top Button Tooltip', passed: backToTopTest.isVisible });
+
+    await page.screenshot({
+      path: 'tests/screenshots/visual-tooltip-back-to-top.png',
+      fullPage: false
+    });
+    console.log(`   📸 Screenshot: visual-tooltip-back-to-top.png`);
+  } else {
+    console.log(`   ⚠️  SKIP - Back-to-top button not visible`);
+    testResults.push({ test: 'Back-to-Top Button Tooltip', passed: true });
+  }
+
+  // ========================================================================
+  // FINAL SUMMARY
+  // ========================================================================
+  console.log("\n" + "=".repeat(70));
+  console.log("📊 VISUAL RENDERING TEST SUMMARY\n");
+
+  const totalTests = testResults.length;
+  const passedTests = testResults.filter(r => r.passed).length;
+  const failedTests = totalTests - passedTests;
+
+  testResults.forEach(result => {
+    console.log(`   ${result.passed ? '✅' : '❌'} ${result.test}`);
+  });
+
+  console.log(`\n   Total: ${passedTests}/${totalTests} tests passed`);
+
+  if (errors.length === 0) {
+    console.log("\n✅ NO CONSOLE ERRORS");
+  } else {
+    console.log(`\n⚠️  ${errors.length} CONSOLE ERRORS`);
+  }
+
+  console.log("=".repeat(70) + "\n");
+
+  if (failedTests === 0) {
+    console.log("🎉 ALL VISUAL TESTS PASSED!");
+    console.log("\n✅ Tooltips are ACTUALLY visible on screen:");
+    console.log("   - Fixed download button (left → right tooltip)");
+    console.log("   - Fixed print button (left → right tooltip)");
+    console.log("   - Fixed zoom button (right → left tooltip)");
+    console.log("   - Fixed shortcuts button (right → left tooltip)");
+    console.log("   - Action bar PDF button");
+    console.log("   - Back-to-top button (→ left tooltip)");
+  } else {
+    console.log("⚠️  SOME VISUAL TESTS FAILED");
+    console.log("\nTooltips are not rendering visually despite CSS being applied.");
+    console.log("This could indicate:");
+    console.log("   - Z-index stacking context issue");
+    console.log("   - Parent container overflow clipping");
+    console.log("   - Tooltip positioned off-screen");
+    console.log("   - Browser rendering bug");
+  }
+
+  console.log("\n📸 Visual screenshots saved in tests/screenshots/");
+  console.log("   Check these images to manually verify tooltip visibility!");
+
+  console.log("\nBrowser will stay open for manual verification.");
+  console.log("Hover over buttons to see tooltips in action.");
+  console.log("Press Ctrl+C when done.\n");
+
+  await new Promise(() => {}); // Keep browser open
+}
+
+await testTooltipVisualRendering();