Действия

MediaWiki

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);
  });
});