added tooltips

src/Foundation.hs

@@ -506,6 +506,7 @@ instance Yesod UniWorX where
             $(widgetFile "standalone/modal")
             $(widgetFile "standalone/showHide")
             $(widgetFile "standalone/inputs")
+            $(widgetFile "standalone/tooltip")
             $(widgetFile "standalone/tabber")
             $(widgetFile "standalone/alerts")
             $(widgetFile "standalone/datepicker")

templates/multiFileField.hamlet

@@ -15,7 +15,6 @@ $# new files
 <div .file-input__unpack>
   <label for=#{fieldId}_zip>ZIPs automatisch entpacken
   <input type=checkbox id=#{fieldId}_zip name=#{fieldName} value=#{unpackZips}>
-  <span .unpack-zip-info-toggler>?
-
-$# TODO: make modal available in this scope
-    ^{modal ".unpack-zip-info-toggler" (Just "Entpackt zips automatisch nach dem Upload und fügt den Inhalt im Stamm-Verzeichnis ein.")}
+  <div class="js-tooltip">
+    <div class="tooltip__handle">?
+    <div class="tooltip__content hidden">Entpackt zips automatisch nach dem Upload und fügt den Inhalt im Stamm-Verzeichnis ein.

templates/multiFileField.lucius

@@ -17,20 +17,6 @@
   color: var(--color-fontsec);
 }
 
-.unpack-zip-info-toggler {
-  background-color: var(--color-dark);
-  border-radius: 50%;
-  height: 1.5rem;
-  width: 1.5rem;
-  line-height: 1.5rem;
-  font-size: 1.2rem;
-  color: white;
-  display: inline-block;
-  text-align: center;
-  cursor: pointer;
-  margin: 0 10px;
-}
-
 .file-input__list {
   margin-left: 15px;
   margin-top: 10px;

templates/standalone/tooltip.hamlet

@@ -0,0 +1 @@
+<!-- only here to be able to include tooltips using `toWidget` -->

templates/standalone/tooltip.julius

@@ -0,0 +1,37 @@
+(function() {;
+  'use strict';
+
+  window.utils = window.utils || {};
+
+  // allows for multiple file uploads with separate inputs
+  window.utils.tooltip = function(tt) {
+    var handle = tt.querySelector('.tooltip__handle');
+    var content = tt.querySelector('.tooltip__content');
+
+    var left = false;
+
+    handle.addEventListener('mouseenter', function() {
+      left = false;
+      content.classList.toggle('to-left', handle.getBoundingClientRect().left + 300 > window.innerWidth);
+      content.classList.remove('hidden');
+    });
+
+    handle.addEventListener('mouseleave', function() {
+      left = true;
+      window.setTimeout(function() {
+        if (left) {
+          content.classList.add('hidden');
+        }
+      }, 250);
+    });
+  }
+
+})();
+
+document.addEventListener('DOMContentLoaded', function() {
+
+  // initialize tooltips
+  Array.from(document.querySelectorAll('.js-tooltip')).forEach(function(tt) {
+    window.utils.tooltip(tt);
+  });
+});

templates/standalone/tooltip.lucius

@@ -0,0 +1,58 @@
+.js-tooltip {
+  position: relative;
+
+  .tooltip__handle {
+    background-color: var(--color-dark);
+    border-radius: 50%;
+    height: 1.5rem;
+    width: 1.5rem;
+    line-height: 1.5rem;
+    font-size: 1.2rem;
+    color: white;
+    display: inline-block;
+    text-align: center;
+    cursor: default;
+    margin: 0 10px;
+  }
+
+  .tooltip__content {
+    position: absolute;
+    top: -10px;
+    transform: translateY(-100%);
+    left: 3px;
+    width: 275px;
+    z-index: 10;
+    background-color: #fafafa;
+    border-radius: 4px;
+    padding: 13px 17px;
+    box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.1);
+    // display: none;
+
+    &.to-left {
+      left: auto;
+      right: 3px;
+
+      &::after {
+        left: auto;
+        right: 10px;
+      }
+    }
+
+    &::after {
+      content: '';
+      width: 16px;
+      height: 16px;
+      background-color: #fafafa;
+      transform: rotate(45deg);
+      position: absolute;
+      left: 10px;
+      // box-shadow: 0 0 4px black;
+      // outline: 1px solid red;
+      bottom: -8px;
+    }
+  }
+
+  .hidden {
+    display: none;
+  }
+}