Merge pull request #351 from maykinmedia/feature/347-add-better-toolt…

…ip-behind-the-(i)-icons

Add improved tooltip to info icons

package.json

@@ -21,14 +21,16 @@
     "homepage": "https://maykinmedia.nl",
     "dependencies": {
         "@fortawesome/fontawesome-free": "^5.15.4",
+        "@fortawesome/fontawesome-svg-core": "^1.2.36",
         "ckeditor5": "^30.0.0",
         "flag-icon-css": "^4.1.6",
         "flatpickr": "^4.6.9",
         "microscope-sass": "latest",
         "pretty-checkbox": "^3.0.3",
         "reseter.css": "^2.0.0",
         "showdown": "^1.9.1",
-        "text-diff": "^1.0.1"
+        "text-diff": "^1.0.1",
+        "tippy.js": "^6.3.7"
     },
     "devDependencies": {
         "@babel/core": "latest",
@@ -48,8 +50,8 @@
         "@ckeditor/ckeditor5-list": "^30.0.0",
         "@ckeditor/ckeditor5-markdown-gfm": "^30.0.0",
         "@ckeditor/ckeditor5-paragraph": "^30.0.0",
-        "@ckeditor/ckeditor5-theme-lark": "^30.0.0",
         "@ckeditor/ckeditor5-table": "^30.0.0",
+        "@ckeditor/ckeditor5-theme-lark": "^30.0.0",
         "arrayify": "^1.0.0",
         "autoprefixer": "^9.0.0",
         "babel-loader": "latest",

src/sdg/js/components/index.js

@@ -10,3 +10,4 @@ import "./catalog";
 import "./diff";
 import "./general";
 import "./product";
+import "./tooltip";

src/sdg/js/components/tooltip.js

@@ -0,0 +1,25 @@
+import {dom} from '@fortawesome/fontawesome-svg-core'
+import tippy from "tippy.js";
+
+
+class InfoTooltip {
+
+    constructor(node) {
+        this.node = node;
+        const text = this.node.firstChild.textContent;
+        this.node.firstChild.remove();
+        tippy(this.node, {
+            content: text,
+            placement: "right",
+            animation: "scale",
+            theme: "sdg",
+        });
+    }
+}
+
+const iconsDoneRendering = () => {
+    const infoIcons = document.querySelectorAll("svg.fa-info-circle[title]");
+    [...infoIcons].forEach(icon => new InfoTooltip(icon));
+};
+
+dom.i2svg({callback: iconsDoneRendering});

src/sdg/scss/components/_index.scss

@@ -27,3 +27,4 @@
 @import 'diff';
 @import 'reference';
 @import 'flags';
+@import 'tooltip';

src/sdg/scss/components/_tooltip.scss

@@ -0,0 +1,12 @@
+@import 'tippy.js/dist/tippy.css';
+@import 'tippy.js/animations/scale.css';
+@import 'colors';
+
+
+.tippy-box {
+  background-color: $color_primary_darker;
+}
+
+.tippy-arrow {
+  color: $color_primary_darker;
+}

src/sdg/templates/account/base.html

@@ -3,7 +3,7 @@
 {% block title %}{% block head_title %}{% endblock head_title %} | SDG invoervoorziening{% endblock title %}
 {% block main_container %}{% endblock %}
 {% block extra_css %}
-    <script defer src="{% static 'bundles/fontawesome.js' %}"></script>
+    <script src="{% static 'bundles/fontawesome.js' %}"></script>
 {% endblock %}
 
 {% block outer_content %}

src/sdg/templates/admin/base_site.html

@@ -13,8 +13,8 @@
 
 {% block extrahead %}
     {{ block.super }}
+    <script src="{% static 'bundles/fontawesome.js' %}"></script>
     <script defer src="{% static 'bundles/sdg-js.js' %}"></script>
-    <script defer src="{% static 'bundles/fontawesome.js' %}"></script>
 {% endblock %}
 
 {% block branding %}

src/sdg/templates/core/base_home.html

@@ -4,7 +4,7 @@
 {% block title %}{% block head_title %}{% endblock head_title %} | SDG{% endblock title %}
 
 {% block extra_css %}
-    <script defer src="{% static 'bundles/fontawesome.js' %}"></script>
+    <script src="{% static 'bundles/fontawesome.js' %}"></script>
 {% endblock %}
 
 {% block outer_content %}

src/sdg/templates/master.html

@@ -33,6 +33,6 @@
 
 {% block extra_js %}
 {% endblock %}
-<script src="{% static 'bundles/sdg-js.js' %}"></script>
+<script defer src="{% static 'bundles/sdg-js.js' %}"></script>
 </body>
 </html>

src/sdg/templates/producten/base.html

@@ -6,5 +6,5 @@
 {% block title %}SDG | {% trans "Producten" %}{% endblock %}
 {% block notifications %}{% endblock %}
 {% block extra_css %}
-    <script defer src="{% static 'bundles/fontawesome.js' %}"></script>
+    <script src="{% static 'bundles/fontawesome.js' %}"></script>
 {% endblock %}