diff --git a/content/picker.js b/content/picker.js index 97b4b4f..9bf673c 100644 --- a/content/picker.js +++ b/content/picker.js @@ -1,8 +1,11 @@ import {getCssPath} from '../lib/css-path.js'; let overlay; +let tooltip; export function startPicker() { if (overlay) return; + + // Create main overlay overlay = document.createElement('div'); overlay.style.position = 'fixed'; overlay.style.top = '0'; @@ -14,6 +17,24 @@ export function startPicker() { overlay.style.border = '2px solid #2ac3ff'; document.body.appendChild(overlay); + // Create tooltip + tooltip = document.createElement('div'); + tooltip.style.position = 'fixed'; + tooltip.style.zIndex = '2147483647'; + tooltip.style.pointerEvents = 'none'; + tooltip.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; + tooltip.style.color = 'white'; + tooltip.style.padding = '8px 12px'; + tooltip.style.borderRadius = '6px'; + tooltip.style.fontSize = '14px'; + tooltip.style.fontFamily = 'Arial, sans-serif'; + tooltip.style.whiteSpace = 'nowrap'; + tooltip.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.3)'; + tooltip.style.transform = 'translate(-50%, -100%)'; + tooltip.style.marginTop = '-10px'; + tooltip.textContent = 'Click an image to select'; + document.body.appendChild(tooltip); + function move(e) { const el = e.target; const rect = el.getBoundingClientRect(); @@ -22,6 +43,10 @@ export function startPicker() { overlay.style.left = rect.left + 'px'; overlay.style.width = rect.width + 'px'; overlay.style.height = rect.height + 'px'; + + // Update tooltip position + tooltip.style.left = e.clientX + 'px'; + tooltip.style.top = e.clientY + 'px'; } function click(e) { @@ -35,8 +60,14 @@ export function startPicker() { function cleanup() { document.removeEventListener('mousemove', move, true); document.removeEventListener('click', click, true); - overlay.remove(); - overlay = null; + if (overlay) { + overlay.remove(); + overlay = null; + } + if (tooltip) { + tooltip.remove(); + tooltip = null; + } } document.addEventListener('mousemove', move, true);