Bookmarklet - use this bookmarklet for show short full title on mouseover. Ensure to copy/paste the top condensed line of the bookmarklet. Info at "https://github.com/isocialPractice/bookmarklets".

siteSpecific_YouTube_ShortHoverTitle.js

/// *********************************************************** ///
// ****************** BROWSER BOOKMARKLET GIST ***************** // 
// ************************************************************* //
//                                                               //  
// LICENSE  /////////////////////////////////////////////////////
// *******                                                       //
// The code in this gist is public domain.                       //  
// Licensed as Public Domain CC0                                 //  
//////////////////////////////////////////////////////////////////
//
// COPY / PAST BELOW LINE TO USE
javascript:(function() { const metapanel = document.getElementById("metapanel"); if (!metapanel) { console.warn("Element with ID 'metapanel' not found."); return; } let hoverTimeout; let tooltipElement = null; /************************************* SUPPORT FUNCTIONS *************************************/ const showTooltip = (text, targetElement) => { if (tooltipElement) { document.body.removeChild(tooltipElement); tooltipElement = null; } tooltipElement = document.createElement("div"); tooltipElement.style.cssText = ` position: absolute; background-color: #333; color: #fff; padding: 5px 10px; border-radius: 4px; font-size: 14px; z-index: 9999; max-width: 300px; white-space: pre-wrap; pointer-events: none; opacity: 0; transition: opacity 0.2s ease-in-out; box-shadow: 0 2px 5px rgba(0,0,0,0.2); `; tooltipElement.textContent = text; document.body.appendChild(tooltipElement); const targetRect = targetElement.getBoundingClientRect(); tooltipElement.style.top = (window.scrollY + targetRect.bottom + 5) + "px"; tooltipElement.style.left = (window.scrollX + targetRect.left) + "px"; tooltipElement.style.opacity = "1"; }; const hideTooltip = () => { if (tooltipElement) { document.body.removeChild(tooltipElement); tooltipElement = null; } }; const handleDelegateMouseOver = (event) => { const target = event.target.closest('h2'); /* Find the closest h2 ancestor */ if (!target || !metapanel.contains(target)) return; /* Ensure it's an h2 within metapanel */ /* Check if event listener was already applied to avoid re-applying */ if (target.dataset.tooltipActive === 'true') { return; } target.dataset.tooltipActive = 'true'; /* Mark as active */ /* Store original title only if it exists and hasn't been stored */ if (target.hasAttribute('title') && !target.dataset.originalTitle) { target.dataset.originalTitle = target.getAttribute('title'); } target.setAttribute('title', ''); /* temporarily remove native tooltip */ const fullText = target.innerText; hoverTimeout = setTimeout(() => { showTooltip(fullText, target); }, 500); }; const handleDelegateMouseOut = (event) => { const target = event.target.closest('h2'); if (!target || !metapanel.contains(target)) return; clearTimeout(hoverTimeout); hideTooltip(); /* Restore original title if it was stored */ if (target.dataset.originalTitle !== undefined) { target.setAttribute('title', target.dataset.originalTitle); delete target.dataset.originalTitle; /* Clean up the dataset property */ } else { target.removeAttribute('title'); /* Ensure no empty title remains if it wasn't originally there */ } delete target.dataset.tooltipActive; /* Mark as inactive */ }; /********************************************************************************************* MAIN FUNCTION *********************************************************************************************/ /* Remove existing delegated listeners if they were previously added */ function mainYouTubeShortHoverTitle() { if (metapanel.dataset.tooltipListenersAdded === 'true') { metapanel.removeEventListener("mouseover", handleDelegateMouseOver); metapanel.removeEventListener("mouseout", handleDelegateMouseOut); } metapanel.addEventListener("mouseover", handleDelegateMouseOver); metapanel.addEventListener("mouseout", handleDelegateMouseOut); metapanel.dataset.tooltipListenersAdded = 'true'; /* Mark that listeners are added */ console.log("Bookmarklet for h2 title display activated!"); } /* Run bookmarklet. */ mainYouTubeShortHoverTitle();})();

// MAKE ANY EDITS AS NEEDED
// *************************************************************
// Use the JS Formatted Bookmarklet below to see if any changes
// need to be made in accordance to the page you want to use
// it for. After making needed changes ensure that the revised
// bookmarklet is condensed before using it in your browser.
// For more info on this bookmarklet visit:
// https://github.com/isocialPractice/bookmarklets

// *************************************************************
// *************************************************************
// ************************JS-FORMATTED*************************
javascript:(function() {
 const metapanel = document.getElementById("metapanel");
 if (!metapanel) {
  console.warn("Element with ID 'metapanel' not found.");
  return;
 }

 let hoverTimeout;
 let tooltipElement = null;
 
 /************************************* SUPPORT FUNCTIONS *************************************/
 const showTooltip = (text, targetElement) => {
  if (tooltipElement) {
   document.body.removeChild(tooltipElement);
   tooltipElement = null;
  }

  tooltipElement = document.createElement("div");
  tooltipElement.style.cssText = `
   position: absolute;
   background-color: #333;
   color: #fff;
   padding: 5px 10px;
   border-radius: 4px;
   font-size: 14px;
   z-index: 9999;
   max-width: 300px;
   white-space: pre-wrap;
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.2s ease-in-out;
   box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  `;
  tooltipElement.textContent = text;
  document.body.appendChild(tooltipElement);

  const targetRect = targetElement.getBoundingClientRect();
  tooltipElement.style.top = (window.scrollY + targetRect.bottom + 5) + "px";
  tooltipElement.style.left = (window.scrollX + targetRect.left) + "px";
  tooltipElement.style.opacity = "1";
 };

 const hideTooltip = () => {
  if (tooltipElement) {
   document.body.removeChild(tooltipElement);
   tooltipElement = null;
  }
 };

 const handleDelegateMouseOver = (event) => {
  const target = event.target.closest('h2'); /* Find the closest h2 ancestor */
  if (!target || !metapanel.contains(target)) return; /* Ensure it's an h2 within metapanel */

  /* Check if event listener was already applied to avoid re-applying */
  if (target.dataset.tooltipActive === 'true') {
   return;
  }
  target.dataset.tooltipActive = 'true'; /* Mark as active */

  /* Store original title only if it exists and hasn't been stored */
  if (target.hasAttribute('title') && !target.dataset.originalTitle) {
   target.dataset.originalTitle = target.getAttribute('title');
  }
  target.setAttribute('title', ''); /* temporarily remove native tooltip */

  const fullText = target.innerText;
  hoverTimeout = setTimeout(() => {
   showTooltip(fullText, target);
  }, 500);
 };

 const handleDelegateMouseOut = (event) => {
  const target = event.target.closest('h2');
  if (!target || !metapanel.contains(target)) return;

  clearTimeout(hoverTimeout);
  hideTooltip();

  /* Restore original title if it was stored */
  if (target.dataset.originalTitle !== undefined) {
      target.setAttribute('title', target.dataset.originalTitle);
   delete target.dataset.originalTitle; /* Clean up the dataset property */
  } else {
   target.removeAttribute('title'); /* Ensure no empty title remains if it wasn't originally there */
  }
  delete target.dataset.tooltipActive; /* Mark as inactive */
 };

 /*********************************************************************************************
                                          MAIN FUNCTION
 *********************************************************************************************/
 /* Remove existing delegated listeners if they were previously added */
 function mainYouTubeShortHoverTitle() {
  if (metapanel.dataset.tooltipListenersAdded === 'true') {
   metapanel.removeEventListener("mouseover", handleDelegateMouseOver);
   metapanel.removeEventListener("mouseout", handleDelegateMouseOut);
  }

  metapanel.addEventListener("mouseover", handleDelegateMouseOver);
  metapanel.addEventListener("mouseout", handleDelegateMouseOut);
  metapanel.dataset.tooltipListenersAdded = 'true'; /* Mark that listeners are added */

  console.log("Bookmarklet for h2 title display activated!");
 }
 /* Run bookmarklet. */
 mainYouTubeShortHoverTitle();
})();