☰

GitHub Make Tooltips

A userscript converts title tooltips into Github Tooltips

  1. // ==UserScript==
  2. // @name        GitHub Make Tooltips
  3. // @version     1.0.5
  4. // @description A userscript converts title tooltips into Github Tooltips
  5. // @license     MIT
  6. // @author      StylishThemes
  7. // @namespace   https://github.com/StylishThemes
  8. // @include     https://github.com/*
  9. // @run-at      document-idle
  10. // @grant       GM_addStyle
  11. // @icon        https://avatars3.githubusercontent.com/u/6145677?v=3&s=200
  12. // @homepageURL https://github.com/StylishThemes/GitHub-Dark-Script
  13. // ==/UserScript==
  14. (() => {
  15.   "use strict";
  16.  
  17.   GM_addStyle(".news .alert, .news .alert .body { overflow: visible !important; }");
  18.  
  19.   function init() {
  20.     let indx = 0;
  21.     const els = document.querySelector("body").querySelectorAll("[title]");
  22.     const regex = /(link|time-ago|relative-time)/gi;
  23.     const len = els.length;
  24.  
  25.     // loop with delay to allow user interaction
  26.     function loop() {
  27.       let el, txt, direction,
  28.         // max number of DOM modifications per loop
  29.         max = 0;
  30.       while (max < 20 && indx < len) {
  31.         if (indx >= len) {
  32.           return;
  33.         }
  34.         el = els[indx];
  35.         if (!regex.test(el.nodeName) && !el.classList.contains("tooltipped")) {
  36.           txt = el.title || "";
  37.           // Change direction of star & fork tooltips - fixes #30
  38.           direction = el.classList.contains("btn-with-count") ?
  39.             "tooltipped-s" :
  40.             "tooltipped-n";
  41.           el.classList.add(...["tooltipped", direction]);
  42.           if (txt.length > 45) {
  43.             el.classList.add("tooltipped-multiline");
  44.           }
  45.           el.setAttribute("aria-label", txt);
  46.           el.removeAttribute("title");
  47.           max++;
  48.         }
  49.         indx++;
  50.       }
  51.       if (indx < len) {
  52.         setTimeout(() => {
  53.           loop();
  54.         }, 200);
  55.       }
  56.     }
  57.     loop();
  58.   }
  59.  
  60.   init();
  61.   document.addEventListener("pjax:end", init);
  62. })();