(function() {; 'use strict'; window.utils = window.utils || {}; window.utils.tooltip = function(tt) { var handle = tt.querySelector('.tooltip__handle'); var content = tt.querySelector('.tooltip__content'); var left = false; // initially set content to hidden content.classList.add('hidden'); 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); }); }; window.utils.tooltipFromAttribute = function(el) { var tt = document.createElement('div'); var handle = document.createElement('div'); var content = document.createElement('div'); tt.classList.add('js-tooltip'); handle.classList.add('tooltip__handle'); content.classList.add('tooltip__content', 'hidden'); handle.innerText = '?'; content.innerHTML = el.getAttribute('data-tooltip'); tt.appendChild(handle); tt.appendChild(content); if (el.nextSiblingElement) { el.parentElement.insertBefore(tt, el.nextSiblingElement); } else { el.parentElement.appendChild(tt); } }; })(); document.addEventListener('setup', function(e) { // JS-TOOLTIPS NOT USED CURRENTLY. // initialize tooltips set via `data-tooltip` // Array.from(e.detail.scope.querySelectorAll('[data-tooltip]')).forEach(function(el) { // window.utils.tooltipFromAttribute(el) // }); // initialize tooltips // Array.from(e.detail.scope.querySelectorAll('.js-tooltip')).forEach(function(tt) { // window.utils.tooltip(tt); // }); });