Мяу! Новый стажёр пытался сделать подсказки, но не справился. На тебя я могу положиться, разберись, почему скрипт не работает!

Новостной сайт, над которым мы работали в предыдущих частях (одна из стартового тренажёра, вторая из текущего), посвящён событиям в IT, и иногда в новостях встречаются малоизвестные названия и сложные понятия. Чтобы посетители не отвлекались на поисковые запросы (ведь в поисковиках, как известно, фотографии котиков), Кекс решил добавить всплывающие подсказки прямо на страницу с новостью.

Слова, которые требуют пояснения, свёрстаны как кнопки c классом tooltip-button:

<button class="tooltip-button" type="button">DogDrones.inc</button>

При клике на слово-кнопку должно появляться небольшое окошко — попап. Внутри попапа выводится подсказка (по-английски такую подсказку называют tooltip).

Стажёр, который занимался этой задачей, использовал метод querySelector, чтобы найти нужные элементы, и добавил словам-кнопкам обработчики событий onclick. При клике на кнопку попапу добавляется класс opened, и подсказка появляется на странице:

let tooltip = document.querySelector('.tooltip');
let tooltipButton = document.querySelector('.tooltip-button');

tooltipButton.onclick = function () {
  tooltip.classList.add('opened');
};

Если кликнуть по кнопке «Закрыть» внутри попапа, класс opened убирается, и подсказка пропадает со страницы:

let closeButton = document.querySelector('.close-button');

closeButton.onclick = function () {
  tooltip.classList.remove('opened');
};

Все эти инструкции нам уже знакомы, и, кажется, код написан без ошибок. Но босс утверждает, что скрипт не работает. Попробуем разобраться, в чём проблема.