Common.js: различия между версиями
Материал из ВикиВоины
Строка 2: | Строка 2: | ||
const selflink = document.querySelector('.mw-selflink'); | const selflink = document.querySelector('.mw-selflink'); | ||
timeline.scrollLeft = selflink.offsetLeft - (timeline.offsetWidth - selflink.offsetWidth) / 2; | timeline.scrollLeft = selflink.offsetLeft - (timeline.offsetWidth - selflink.offsetWidth) / 2; | ||
+ | |||
+ | const labels = document.querySelectorAll('.question-mark'); | ||
+ | |||
+ | labels.forEach(label => { | ||
+ | label.addEventListener('mouseover', function(event) { | ||
+ | const tooltip = document.createElement('div'); | ||
+ | tooltip.classList.add('tooltip'); | ||
+ | tooltip.innerHTML = 'This is a tool tip for this label'; | ||
+ | document.body.appendChild(tooltip); | ||
+ | |||
+ | const labelRect = event.target.getBoundingClientRect(); | ||
+ | tooltip.style.left = labelRect.right + 'px'; | ||
+ | tooltip.style.top = labelRect.top + 'px'; | ||
+ | tooltip.style.display = 'block'; | ||
+ | }); | ||
+ | |||
+ | label.addEventListener('mouseout', function() { | ||
+ | const tooltip = document.querySelector('.tooltip'); | ||
+ | document.body.removeChild(tooltip); | ||
+ | }); | ||
+ | }); |
Версия 18:13, 2 февраля 2023
const timeline = document.querySelector('.ages-timeline'); const selflink = document.querySelector('.mw-selflink'); timeline.scrollLeft = selflink.offsetLeft - (timeline.offsetWidth - selflink.offsetWidth) / 2; const labels = document.querySelectorAll('.question-mark'); labels.forEach(label => { label.addEventListener('mouseover', function(event) { const tooltip = document.createElement('div'); tooltip.classList.add('tooltip'); tooltip.innerHTML = 'This is a tool tip for this label'; document.body.appendChild(tooltip); const labelRect = event.target.getBoundingClientRect(); tooltip.style.left = labelRect.right + 'px'; tooltip.style.top = labelRect.top + 'px'; tooltip.style.display = 'block'; }); label.addEventListener('mouseout', function() { const tooltip = document.querySelector('.tooltip'); document.body.removeChild(tooltip); }); });