Tooltips broken. #859

Description

@rgroves

Describe the bug
The tooltip that is meant to be on the disabled Enroll buttons during course registration are broken for age/gender restrictions.

To Reproduce
Steps to reproduce the behavior:

  1. Log in as a Guardian
  2. Navigate to an upcoming session that has an age/gender restriction
  3. Be sure you have at least one student in the Guardian's account that violates the session's restriction
  4. Hover over the disabled "Enroll" button and you'll see that there is no tooltip

Expected behavior
When the disabled "Enroll" button is hovered over it should display a tooltip regarding why enrollment is not being allowed.

Screenshots
When hovering over Mitch's Enroll button (which is disabled due to an age restriction) notice there is no tooltip:
image

Here is what it should look like using the prerequisite restriction example when hovering over the Enroll button for David:
image

Additional context
It looks like there are old Bootstrap classes being used for the tooltips instead of the necessary Foundation classes needed. I noticed this while working on #816 and made sure the tooltips for the prerequisite enforcement were correct, but thought the others not related to prerequisites should be fixed in their own issue.

@karbassi feel free to assign this one to me and put it up on the Feb 2021 project board and/or prioritize it as you see fit.

Metadata

Metadata

Labels

Type

No type

Projects

No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

    , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
     blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
    }
    } catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
    })();
    (function(){
    try {
    var __m = "github.com";
    var __re = new RegExp('^' + "github\\.com" + '
    
    Skip to content

    Tooltips broken. #859

    Description

    @rgroves

    Describe the bug
    The tooltip that is meant to be on the disabled Enroll buttons during course registration are broken for age/gender restrictions.

    To Reproduce
    Steps to reproduce the behavior:

    1. Log in as a Guardian
    2. Navigate to an upcoming session that has an age/gender restriction
    3. Be sure you have at least one student in the Guardian's account that violates the session's restriction
    4. Hover over the disabled "Enroll" button and you'll see that there is no tooltip

    Expected behavior
    When the disabled "Enroll" button is hovered over it should display a tooltip regarding why enrollment is not being allowed.

    Screenshots
    When hovering over Mitch's Enroll button (which is disabled due to an age restriction) notice there is no tooltip:
    image

    Here is what it should look like using the prerequisite restriction example when hovering over the Enroll button for David:
    image

    Additional context
    It looks like there are old Bootstrap classes being used for the tooltips instead of the necessary Foundation classes needed. I noticed this while working on #816 and made sure the tooltips for the prerequisite enforcement were correct, but thought the others not related to prerequisites should be fixed in their own issue.

    @karbassi feel free to assign this one to me and put it up on the Feb 2021 project board and/or prioritize it as you see fit.

    Metadata

    Metadata

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions

      , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
      Skip to content

      Tooltips broken. #859

      Description

      @rgroves

      Describe the bug
      The tooltip that is meant to be on the disabled Enroll buttons during course registration are broken for age/gender restrictions.

      To Reproduce
      Steps to reproduce the behavior:

      1. Log in as a Guardian
      2. Navigate to an upcoming session that has an age/gender restriction
      3. Be sure you have at least one student in the Guardian's account that violates the session's restriction
      4. Hover over the disabled "Enroll" button and you'll see that there is no tooltip

      Expected behavior
      When the disabled "Enroll" button is hovered over it should display a tooltip regarding why enrollment is not being allowed.

      Screenshots
      When hovering over Mitch's Enroll button (which is disabled due to an age restriction) notice there is no tooltip:
      image

      Here is what it should look like using the prerequisite restriction example when hovering over the Enroll button for David:
      image

      Additional context
      It looks like there are old Bootstrap classes being used for the tooltips instead of the necessary Foundation classes needed. I noticed this while working on #816 and made sure the tooltips for the prerequisite enforcement were correct, but thought the others not related to prerequisites should be fixed in their own issue.

      @karbassi feel free to assign this one to me and put it up on the Feb 2021 project board and/or prioritize it as you see fit.

      Metadata

      Metadata

      Labels

      Type

      No type

      Projects

      No projects

        Milestone

        Relationships

        None yet

        Development

        No branches or pull requests

        Issue actions

        , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
        Skip to content

        Tooltips broken. #859

        Description

        @rgroves

        Describe the bug
        The tooltip that is meant to be on the disabled Enroll buttons during course registration are broken for age/gender restrictions.

        To Reproduce
        Steps to reproduce the behavior:

        1. Log in as a Guardian
        2. Navigate to an upcoming session that has an age/gender restriction
        3. Be sure you have at least one student in the Guardian's account that violates the session's restriction
        4. Hover over the disabled "Enroll" button and you'll see that there is no tooltip

        Expected behavior
        When the disabled "Enroll" button is hovered over it should display a tooltip regarding why enrollment is not being allowed.

        Screenshots
        When hovering over Mitch's Enroll button (which is disabled due to an age restriction) notice there is no tooltip:
        image

        Here is what it should look like using the prerequisite restriction example when hovering over the Enroll button for David:
        image

        Additional context
        It looks like there are old Bootstrap classes being used for the tooltips instead of the necessary Foundation classes needed. I noticed this while working on #816 and made sure the tooltips for the prerequisite enforcement were correct, but thought the others not related to prerequisites should be fixed in their own issue.

        @karbassi feel free to assign this one to me and put it up on the Feb 2021 project board and/or prioritize it as you see fit.

        Metadata

        Metadata

        Labels

        Type

        No type

        Projects

        No projects

          Milestone

          Relationships

          None yet

          Development

          No branches or pull requests

          Issue actions

          , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
          Skip to content

          Tooltips broken. #859

          Description

          @rgroves

          Describe the bug
          The tooltip that is meant to be on the disabled Enroll buttons during course registration are broken for age/gender restrictions.

          To Reproduce
          Steps to reproduce the behavior:

          1. Log in as a Guardian
          2. Navigate to an upcoming session that has an age/gender restriction
          3. Be sure you have at least one student in the Guardian's account that violates the session's restriction
          4. Hover over the disabled "Enroll" button and you'll see that there is no tooltip

          Expected behavior
          When the disabled "Enroll" button is hovered over it should display a tooltip regarding why enrollment is not being allowed.

          Screenshots
          When hovering over Mitch's Enroll button (which is disabled due to an age restriction) notice there is no tooltip:
          image

          Here is what it should look like using the prerequisite restriction example when hovering over the Enroll button for David:
          image

          Additional context
          It looks like there are old Bootstrap classes being used for the tooltips instead of the necessary Foundation classes needed. I noticed this while working on #816 and made sure the tooltips for the prerequisite enforcement were correct, but thought the others not related to prerequisites should be fixed in their own issue.

          @karbassi feel free to assign this one to me and put it up on the Feb 2021 project board and/or prioritize it as you see fit.

          Metadata

          Metadata

          Labels

          Type

          No type

          Projects

          No projects

            Milestone

            Relationships

            None yet

            Development

            No branches or pull requests

            Issue actions

            , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
            Skip to content

            Tooltips broken. #859

            Description

            @rgroves

            Describe the bug
            The tooltip that is meant to be on the disabled Enroll buttons during course registration are broken for age/gender restrictions.

            To Reproduce
            Steps to reproduce the behavior:

            1. Log in as a Guardian
            2. Navigate to an upcoming session that has an age/gender restriction
            3. Be sure you have at least one student in the Guardian's account that violates the session's restriction
            4. Hover over the disabled "Enroll" button and you'll see that there is no tooltip

            Expected behavior
            When the disabled "Enroll" button is hovered over it should display a tooltip regarding why enrollment is not being allowed.

            Screenshots
            When hovering over Mitch's Enroll button (which is disabled due to an age restriction) notice there is no tooltip:
            image

            Here is what it should look like using the prerequisite restriction example when hovering over the Enroll button for David:
            image

            Additional context
            It looks like there are old Bootstrap classes being used for the tooltips instead of the necessary Foundation classes needed. I noticed this while working on #816 and made sure the tooltips for the prerequisite enforcement were correct, but thought the others not related to prerequisites should be fixed in their own issue.

            @karbassi feel free to assign this one to me and put it up on the Feb 2021 project board and/or prioritize it as you see fit.

            Metadata

            Metadata

            Labels

            Type

            No type

            Projects

            No projects

              Milestone

              Relationships

              None yet

              Development

              No branches or pull requests

              Issue actions

              , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
              Skip to content

              Tooltips broken. #859

              Description

              @rgroves

              Describe the bug
              The tooltip that is meant to be on the disabled Enroll buttons during course registration are broken for age/gender restrictions.

              To Reproduce
              Steps to reproduce the behavior:

              1. Log in as a Guardian
              2. Navigate to an upcoming session that has an age/gender restriction
              3. Be sure you have at least one student in the Guardian's account that violates the session's restriction
              4. Hover over the disabled "Enroll" button and you'll see that there is no tooltip

              Expected behavior
              When the disabled "Enroll" button is hovered over it should display a tooltip regarding why enrollment is not being allowed.

              Screenshots
              When hovering over Mitch's Enroll button (which is disabled due to an age restriction) notice there is no tooltip:
              image

              Here is what it should look like using the prerequisite restriction example when hovering over the Enroll button for David:
              image

              Additional context
              It looks like there are old Bootstrap classes being used for the tooltips instead of the necessary Foundation classes needed. I noticed this while working on #816 and made sure the tooltips for the prerequisite enforcement were correct, but thought the others not related to prerequisites should be fixed in their own issue.

              @karbassi feel free to assign this one to me and put it up on the Feb 2021 project board and/or prioritize it as you see fit.

              Metadata

              Metadata

              Labels

              Type

              No type

              Projects

              No projects

                Milestone

                Relationships

                None yet

                Development

                No branches or pull requests

                Issue actions

                , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
                Skip to content

                Tooltips broken. #859

                Description

                @rgroves

                Describe the bug
                The tooltip that is meant to be on the disabled Enroll buttons during course registration are broken for age/gender restrictions.

                To Reproduce
                Steps to reproduce the behavior:

                1. Log in as a Guardian
                2. Navigate to an upcoming session that has an age/gender restriction
                3. Be sure you have at least one student in the Guardian's account that violates the session's restriction
                4. Hover over the disabled "Enroll" button and you'll see that there is no tooltip

                Expected behavior
                When the disabled "Enroll" button is hovered over it should display a tooltip regarding why enrollment is not being allowed.

                Screenshots
                When hovering over Mitch's Enroll button (which is disabled due to an age restriction) notice there is no tooltip:
                image

                Here is what it should look like using the prerequisite restriction example when hovering over the Enroll button for David:
                image

                Additional context
                It looks like there are old Bootstrap classes being used for the tooltips instead of the necessary Foundation classes needed. I noticed this while working on #816 and made sure the tooltips for the prerequisite enforcement were correct, but thought the others not related to prerequisites should be fixed in their own issue.

                @karbassi feel free to assign this one to me and put it up on the Feb 2021 project board and/or prioritize it as you see fit.

                Metadata

                Metadata

                Labels

                Type

                No type

                Projects

                No projects

                  Milestone

                  Relationships

                  None yet

                  Development

                  No branches or pull requests

                  Issue actions