Проблема с функцией наведения после переноса JavaScript в HTML файл

Оффтоп javascript
1

Привет всем! У меня возникла небольшая проблема. Я объединил свои отдельные файлы JS, CSS и HTML в один HTML файл для загрузки в IBM Connection. Но теперь функция наведения мыши перестала работать. Вот пример моего JavaScript кода:

function showTooltip(event) {
  let infoBox = document.getElementById('tooltip');
  infoBox.style.display = 'block';
  infoBox.textContent = event.target.dataset.info;
}

function hideTooltip() {
  document.getElementById('tooltip').style.display = 'none';
}

function moveTooltip(event) {
  let tooltip = document.getElementById('tooltip');
  tooltip.style.top = event.pageY - tooltip.offsetHeight - 30 + 'px';
  tooltip.style.left = event.pageX - tooltip.offsetWidth / 2 + 'px';
}

document.querySelectorAll('path, circle').forEach(elem => {
  elem.addEventListener('mouseenter', showTooltip);
  elem.addEventListener('mouseleave', hideTooltip);
});

document.addEventListener('mousemove', moveTooltip);

Кто-нибудь может подсказать, почему это могло произойти и как это исправить? Заранее спасибо за помощь!

2

Добавлю к сказанному - проверь, правильно ли подключены стили для твоего tooltip’а после объединения файлов. Иногда при переносе CSS в HTML стили могут потеряться или сбиться. Убедись, что у элемента с id ‘tooltip’ есть нужные стили, особенно position: absolute. Если все ок со стилями, то проблема точно в JS. Тогда решение коллег должно помочь. А вообще, при таких объединениях файлов лучше использовать нормальные сборщики, типа Webpack - меньше геморроя.

3

Проблема может быть в том, что скрипт выполняется до загрузки DOM. Попробуй обернуть код в функцию и вызвать ее после загрузки страницы:

document.addEventListener('DOMContentLoaded', function() {
  // твой существующий код
});

Это должно решить проблему. Если нет, проверь консоль на ошибки. Возможно, какие-то элементы не находятся или изменились их id/классы при объединении файлов.