68 lines
1.8 KiB
Plaintext
68 lines
1.8 KiB
Plaintext
(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);
|
|
// });
|
|
});
|