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

Почему не работает вторая кнопка? Всё дело в том, что метод querySelector возвращает, то есть передаёт информацию, только об одном элементе. Если в скобках указан селектор, который подходит нескольким элементам на странице, то возвращается только первый из них. Как быть, если нужно найти все элементы? Используем метод querySelectorAll:

// Найдёт все абзацы на странице
let elements = document.querySelectorAll('p');

Метод querySelectorAll находит все элементы на странице, которые соответствуют указанному селектору, и возвращает набор этих элементов — коллекцию.

Коллекцию, как и обычный элемент, можно сохранить в переменной. Самый простой способ узнать, какие элементы содержит коллекция, — вывести её в консоль:

// Выведет коллекцию в консоль
console.log(elements);

В нашей консоли коллекция выглядит как список, в котором элементы перечислены через запятую. Весь список обёрнут в квадратные скобки, а у элементов указан только их тег и, например, класс:

Чтобы элементы отобразились так же, как в разметке, коллекцию нужно развернуть, кликнув на стрелку-треугольник слева:

Слова-кнопки на нашем сайте — это элементы с классом tooltip-button. Скажем JavaScript найти их все и выведем полученную коллекцию в консоль.