javascript:(function() { /* The container for the Shorts overlay elements */ const metapanelYoutubeShortHover = document.getElementById("experiment-overlay"); if (!metapanelYoutubeShortHover) { console.warn("Element with ID 'experiment-overlay' not found."); return; } /* Global variables */ var hoverTimeoutYoutubeShortHover; var tooltipElementYoutubeShortHover = null; /************************************* SUPPORT FUNCTIONS *************************************/ const showTooltipYoutubeShortHover = (text, targetElement) => { if (tooltipElementYoutubeShortHover) { document.body.removeChild(tooltipElementYoutubeShortHover); tooltipElementYoutubeShortHover = null; } tooltipElementYoutubeShortHover = document.createElement("div"); tooltipElementYoutubeShortHover.style.cssText = ` position: fixed; background-color: rgba(33, 33, 33, 0.95); color: #fff; padding: 8px 12px; border-radius: 4px; font-size: 14px; z-index: 10000; max-width: 300px; white-space: pre-wrap; pointer-events: none; opacity: 0; transition: opacity 0.2s ease-in-out; box-shadow: 0 4px 12px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); `; tooltipElementYoutubeShortHover.textContent = text; document.body.appendChild(tooltipElementYoutubeShortHover); const targetRect = targetElement.getBoundingClientRect(); /* Position tooltip above or below based on space */ let topPos = targetRect.bottom + 10; if (topPos + tooltipElementYoutubeShortHover.offsetHeight > window.innerHeight) { topPos = targetRect.top - tooltipElementYoutubeShortHover.offsetHeight - 10; } tooltipElementYoutubeShortHover.style.top = topPos + "px"; tooltipElementYoutubeShortHover.style.left = Math.max(10, targetRect.left) + "px"; tooltipElementYoutubeShortHover.style.opacity = "1"; }; const hideTooltipYoutubeShortHover = () => { if (tooltipElementYoutubeShortHover) { document.body.removeChild(tooltipElementYoutubeShortHover); tooltipElementYoutubeShortHover = null; } }; const handleDelegateMouseOverYoutubeShortHover = (event) => { /* YouTube Shorts titles are now H1 elements */ let target = event.target.closest('h1'); if (!target || !metapanelYoutubeShortHover.contains(target)) return; if (target.dataset.tooltipActive === 'true') { return; } target.dataset.tooltipActive = 'true'; if (target.hasAttribute('title') && !target.dataset.originalTitle) { target.dataset.originalTitle = target.getAttribute('title'); } target.setAttribute('title', ''); const fullText = target.innerText; hoverTimeoutYoutubeShortHover = setTimeout(() => { showTooltipYoutubeShortHover(fullText, target); }, 400); }; const handleDelegateMouseOutYoutubeShortHover = (event) => { let target = event.target.closest('h1'); if (!target || !metapanelYoutubeShortHover.contains(target)) return; clearTimeout(hoverTimeoutYoutubeShortHover); hideTooltipYoutubeShortHover(); if (target.dataset.originalTitle !== undefined) { target.setAttribute('title', target.dataset.originalTitle); delete target.dataset.originalTitle; } else { target.removeAttribute('title'); } delete target.dataset.tooltipActive; }; /********************************************************************************************* MAIN FUNCTION *********************************************************************************************/ function mainYouTubeShortHoverTitle() { /* Cleanup previous listeners if re-running */ metapanelYoutubeShortHover.removeEventListener("mouseover", handleDelegateMouseOverYoutubeShortHover); metapanelYoutubeShortHover.removeEventListener("mouseout", handleDelegateMouseOutYoutubeShortHover); metapanelYoutubeShortHover.addEventListener("mouseover", handleDelegateMouseOverYoutubeShortHover); metapanelYoutubeShortHover.addEventListener("mouseout", handleDelegateMouseOutYoutubeShortHover); console.log("YouTube Shorts Title Hover bookmarklet updated and active!"); } mainYouTubeShortHoverTitle(); })();