diff --git a/templates/standalone/tooltip.julius b/templates/standalone/tooltip.julius index 41ee803ad..42f283dd8 100644 --- a/templates/standalone/tooltip.julius +++ b/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); + // }); }); diff --git a/templates/standalone/tooltip.lucius b/templates/standalone/tooltip.lucius index b123609c6..27e85f270 100644 --- a/templates/standalone/tooltip.lucius +++ b/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; } }