Cleanup jQuery (#2139)

_includes/badge.html

@@ -3,7 +3,7 @@
   href="{{ include.link }}" class="badge badge-{{ include.color | default: "info" }}"
   {% if include.tooltip %}
   data-toggle="tooltip"
-  title="{{ include.tooltip }}"><i class="{{ include.icon | default: "far fa-question-circle"}}"></i> {{ include.text }}
+  data-original-title="{{ include.tooltip }}"><i class="{{ include.icon | default: "far fa-question-circle"}}"></i> {{ include.text }}
 {% else %}><i class="{{ include.icon | default: "fas fa-external-link-alt"}}"></i> {{ include.text }}{% endif %}
 </a>
 {% else %}
@@ -11,7 +11,7 @@
   class="badge badge-{{ include.color | default: "info" }}"
   {% if include.tooltip %}
     data-toggle="tooltip"
-    title="{{ include.tooltip }}"
+    data-original-title="{{ include.tooltip }}"
     > <i class="{{ include.icon | default: "far fa-question-circle"}}"></i> {{include.text}}
   {% else %}
     > {% if include.icon %}<i class="{{ include.icon }}"></i>{% endif %} {{include.text}}

_includes/card.html

@@ -17,7 +17,7 @@
                     {% assign text = label_data[1] %}
                     {% assign tooltip = label_data[2] | default: "" %}
                     {% assign help_icon = '<i class="far fa-question-circle"></i>' %}
-                    <span class="badge badge-{{color}}" {% if tooltip %} data-toggle="tooltip" title="{{ tooltip }}">{{text}} {{ help_icon
+                    <span class="badge badge-{{color}}" {% if tooltip %} data-toggle="tooltip" data-original-title="{{ tooltip }}">{{text}} {{ help_icon
                         }}
                         {% else %}
                         >{{text}}

_includes/cardv2.html

@@ -14,7 +14,7 @@
             class="badge badge-{{color}}"
             {% if tooltip %}
               data-toggle="tooltip"
-              title="{{ tooltip }}"
+              data-original-title="{{ tooltip }}"
               > {{text}} {{ help_icon }}
             {% else %}
               > {{text}}

_includes/footer.html

@@ -55,7 +55,7 @@
       <span class="fab fa-creative-commons-zero fa-2x mr-2"></span>
       <a
         href="/LICENSE.txt"
-        title="This work is free. You can redistribute it and/or modify it under the terms of the &quot;Creative Commons CC0 1.0 Universal Public Domain Dedication&quot;."
+        data-original-title="This work is free. You can redistribute it and/or modify it under the terms of the &quot;Creative Commons CC0 1.0 Universal Public Domain Dedication&quot;."
         data-toggle="tooltip"
         data-placement="top">
         CC0

_includes/scripts.html

@@ -1,4 +1,3 @@
-<script src="/assets/js/jquery-3.3.1.min.js?v=4"></script>
 <script src="/assets/js/popper.min.js?v=4"></script>
 <script src="/assets/js/bootstrap.min.js?v=4"></script>
 <script src="/assets/js/sortable.min.js?v=4"></script>

_includes/sections/dns.html

@@ -95,7 +95,7 @@ We also log how many times this or that tracker has been blocked. We need this i
         <td>
           <div
             class="btn-secondary btn-icon"
-            title="&quot;No logs.&quot;"
+            data-original-title="&quot;No logs.&quot;"
             data-toggle="tooltip"
             data-placement="bottom">
             <span class="fas fa-globe"></span>
@@ -186,7 +186,7 @@ We also log how many times this or that tracker has been blocked. We need this i
         <td>
           <div
             class="btn-secondary btn-icon"
-            title="&quot;CZ.NIC resolvers neither collect any personal data nor gather information on pages where your computer sends personal data.&quot;"
+            data-original-title="&quot;CZ.NIC resolvers neither collect any personal data nor gather information on pages where your computer sends personal data.&quot;"
             data-toggle="tooltip"
             data-placement="bottom">
             <span class="fas fa-globe"></span>
@@ -507,7 +507,7 @@ We also log how many times this or that tracker has been blocked. We need this i
         <td>
           <div
             class="btn-secondary btn-icon"
-            title="&quot;Absolutely nothing is being logged, neither about the users nor the usage of this service. I do keep graphs of the total number of queries, but no personally identifiable information is saved. The data that is saved will never be sold or used for anything except capacity planning of the service.&quot;"
+            data-original-title="&quot;Absolutely nothing is being logged, neither about the users nor the usage of this service. I do keep graphs of the total number of queries, but no personally identifiable information is saved. The data that is saved will never be sold or used for anything except capacity planning of the service.&quot;"
             data-toggle="tooltip"
             data-placement="bottom">
             <span class="fas fa-globe"></span>

assets/css/style.scss

@@ -406,3 +406,55 @@ input#nav-toggle,
   font-size: 0.875em;
   content: "\f186";
 }
+
+/* Vanilla CSS implementation for tooltip */
+[data-toggle="tooltip"] {
+  cursor: pointer;
+  position: relative;
+  z-index: 1337;
+}
+
+[data-toggle="tooltip"]:before,
+[data-toggle="tooltip"]:after {
+  opacity: 0;
+  transition: opacity 0.15s linear;
+  pointer-events: none;
+}
+
+[data-toggle="tooltip"]:before {
+  background-color: #000;
+  border-radius: 3px;
+  bottom: 150%;
+  content: attr(data-original-title);
+  color: #fff;
+  font-size: 14px;
+  left: 50%;
+  line-height: 1.2;
+  margin-bottom: 5px;
+  margin-left: -100px;
+  padding: 7px;
+  position: absolute;
+  text-align: center;
+  width: 200px;
+}
+
+/* Little arrow */
+[data-toggle="tooltip"]:after {
+  border-style: solid;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-top-color: #000;
+  border-width: 5px;
+  border-bottom: none;
+  bottom: 150%;
+  content: " ";
+  left: 50%;
+  margin-left: -5px;
+  position: absolute;
+  width: 0;
+}
+
+[data-toggle="tooltip"]:hover:before,
+[data-toggle="tooltip"]:hover:after {
+  opacity: .9;
+}

assets/js/main.js

@@ -1,6 +1,3 @@
-$(function() {
-  $("[data-toggle='tooltip']").tooltip();
-});
 document.querySelectorAll(".onclick-select").forEach(element => {
   element.addEventListener("click", element.select);
 });

pages/about/librejs.html

@@ -19,10 +19,6 @@ permalink: /about/javascript/
     <td><a href="/assets/js/bootstrap.min.js">bootstrap.min.js</a></td>
     <td><a href="https://github.com/twbs/bootstrap/raw/main/LICENSE">Expat</a></td>
   </tr>
-  <tr>
-    <td><a href="/assets/js/jquery-3.3.1.min.js">jquery-3.3.1.min.js</a></td>
-    <td><a href="https://github.com/jquery/jquery/raw/master/LICENSE.txt">Expat</a></td>
-  </tr>
   <tr>
     <td><a href="/assets/js/popper.min.js">popper.min.js</a></td>
     <td><a href="https://github.com/FezVrasta/popper.js/raw/master/LICENSE.md">Expat</a></td>

pages/notices.md

@@ -28,7 +28,6 @@ In certain jurisdictions, namely those in which the copyright waiver in the CC0-
 Code, including source files and code samples if any in the content, is released under CC-1.0, with the following exceptions:
 
 - Bootstrap code is under the MIT license. See: [github.com/twbs/bootstrap/blob/master/LICENSE](https://github.com/twbs/bootstrap/blob/master/LICENSE)
-- [jQuery](https://github.com/privacytools/privacytools.io/blob/master/assets/js/jquery-3.3.1.min.js) is under the MIT license. See: [jquery.org/license](https://jquery.org/license/)
 - [Popper.js](https://github.com/privacytools/privacytools.io/blob/master/assets/js/popper.min.js) is under the MIT license. See: [github.com/FezVrasta/popper.js/raw/master/LICENSE.md](https://github.com/FezVrasta/popper.js/raw/master/LICENSE.md)
 - [Sortable](https://github.com/privacytools/privacytools.io/blob/master/assets/js/sortable.min.js) is under the MIT license. See: [github.com/HubSpot/sortable/raw/master/LICENSE](https://github.com/HubSpot/sortable/raw/master/LICENSE)
 - The Font Awesome icons are under CC-BY-4.0, Font Awesome fonts are under SIL OFL 1.1, and Font Awesome code is under the MIT License. See: [fontawesome.com/license/free](https://fontawesome.com/license/free)