diff --git a/popup.html b/popup.html index 66fa1e4..361607e 100644 --- a/popup.html +++ b/popup.html @@ -84,7 +84,6 @@ display: flex; align-items: center; justify-content: space-between; - margin-bottom: 20px; } .toggle-label { @@ -151,69 +150,6 @@ line-height: 1.3; } - .tooltip { - position: relative; - display: inline-block; - margin-left: 6px; - cursor: help; - } - - .tooltip-icon { - width: 14px; - height: 14px; - border-radius: 50%; - background: #6c757d; - color: white; - font-size: 10px; - font-weight: bold; - display: inline-flex; - align-items: center; - justify-content: center; - user-select: none; - } - - .tooltip-content { - visibility: hidden; - width: 280px; - background-color: #333; - color: #fff; - text-align: left; - border-radius: 6px; - padding: 12px; - position: absolute; - z-index: 1000; - bottom: 125%; - left: 50%; - margin-left: -140px; - opacity: 0; - transition: opacity 0.3s, visibility 0.3s; - font-size: 12px; - line-height: 1.4; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); - } - - .tooltip-content::after { - content: ""; - position: absolute; - top: 100%; - left: 50%; - margin-left: -5px; - border-width: 5px; - border-style: solid; - border-color: #333 transparent transparent transparent; - } - - .tooltip:hover .tooltip-content, - .tooltip:focus-within .tooltip-content { - visibility: visible; - opacity: 1; - } - - .tooltip-icon:focus { - outline: 2px solid #007bff; - outline-offset: 2px; - } - .shortcut-info { font-size: 11px; color: #666; @@ -277,21 +213,7 @@
- +
- Automatically download screenshots as PNG files to your computer. Hover over the "?" for more details. + Automatically download screenshots as PNG files to your default downloads folder.
- +
- Automatically copy screenshots to clipboard for quick pasting. Hover over the "?" for more details. + Automatically copy screenshots to your clipboard for quick pasting.
diff --git a/popup.js b/popup.js index 5c6a712..529b7e0 100644 --- a/popup.js +++ b/popup.js @@ -145,8 +145,7 @@ document.addEventListener('DOMContentLoaded', async () => { // Check current state checkSelectorState(); - // Handle tooltip keyboard navigation - setupTooltipAccessibility(); + // Tooltips removed function toggleButtons(isActive) { if (isActive) { @@ -191,50 +190,7 @@ document.addEventListener('DOMContentLoaded', async () => { } } - function setupTooltipAccessibility() { - const tooltips = document.querySelectorAll('.tooltip'); - - tooltips.forEach(tooltip => { - const tooltipIcon = tooltip.querySelector('.tooltip-icon'); - const tooltipContent = tooltip.querySelector('.tooltip-content'); - - if (!tooltipIcon || !tooltipContent) return; - - // Handle keyboard events for tooltip - tooltipIcon.addEventListener('keydown', (e) => { - if (e.key === 'Enter' || e.key === ' ') { - e.preventDefault(); - // Toggle tooltip visibility on Enter/Space - const isVisible = tooltipContent.style.visibility === 'visible'; - tooltipContent.style.visibility = isVisible ? 'hidden' : 'visible'; - tooltipContent.style.opacity = isVisible ? '0' : '1'; - } else if (e.key === 'Escape') { - // Hide tooltip on Escape - tooltipContent.style.visibility = 'hidden'; - tooltipContent.style.opacity = '0'; - } - }); - - // Hide tooltip when clicking outside - document.addEventListener('click', (e) => { - if (!tooltip.contains(e.target)) { - tooltipContent.style.visibility = 'hidden'; - tooltipContent.style.opacity = '0'; - } - }); - - // Handle focus loss - tooltipIcon.addEventListener('blur', (e) => { - // Small delay to allow for focus to move to tooltip content if needed - setTimeout(() => { - if (!tooltipIcon.matches(':focus-within')) { - tooltipContent.style.visibility = 'hidden'; - tooltipContent.style.opacity = '0'; - } - }, 100); - }); - }); - } + // Tooltips removed: no setup needed }); // Listen for messages from content script