Hover-tooltips now also without JS

templates/standalone/tooltip.julius

@@ -3,7 +3,6 @@
 
   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');
@@ -55,13 +54,15 @@
 
 document.addEventListener('DOMContentLoaded', function() {
 
-    // initialize tooltips set via `data-tooltip`
-    Array.from(document.querySelectorAll('[data-tooltip]')).forEach(function(el) {
-      window.utils.tooltipFromAttribute(el)
-    });
+  // JS-TOOLTIPS NOT USED CURRENTLY.
+
+  // initialize tooltips set via `data-tooltip`
+  // Array.from(document.querySelectorAll('[data-tooltip]')).forEach(function(el) {
+  //   window.utils.tooltipFromAttribute(el)
+  // });
 
   // initialize tooltips
-  Array.from(document.querySelectorAll('.js-tooltip')).forEach(function(tt) {
-    window.utils.tooltip(tt);
-  });
+  // Array.from(document.querySelectorAll('.js-tooltip')).forEach(function(tt) {
+  //   window.utils.tooltip(tt);
+  // });
 });

templates/standalone/tooltip.lucius

@@ -2,8 +2,8 @@
   position: relative;
   display: inline-block;
 
-  .hidden {
-    display: none;
+  &:hover .tooltip__content {
+    display: inline-block;
   }
 }
 
@@ -17,15 +17,16 @@
   color: white;
   display: inline-block;
   text-align: center;
-  cursor: default;
   margin: 0 10px;
+  cursor: default;
 }
 
 .tooltip__content {
   position: absolute;
+  display: none;
   top: -10px;
   transform: translateY(-100%);
-  left: 3px;
+  right: 3px;
   width: 275px;
   z-index: 10;
   background-color: #fafafa;
@@ -33,16 +34,6 @@
   padding: 13px 17px;
   box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.1);
 
-  &.to-left {
-    left: auto;
-    right: 3px;
-
-    &::after {
-      left: auto;
-      right: 10px;
-    }
-  }
-
   &::after {
     content: '';
     width: 16px;
@@ -50,7 +41,7 @@
     background-color: #fafafa;
     transform: rotate(45deg);
     position: absolute;
-    left: 10px;
+    right: 10px;
     bottom: -8px;
   }
 }