Мы научились работать с элементами в коллекции и сделали так, чтобы попап появлялся при клике на любую из кнопок. Внутри попапа должен выводиться текст, поясняющий слово, на которое нажал пользователь. Текст подсказки хранится в разметке, в атрибуте data-tooltip-text самой кнопки.

Что это за атрибут? HTML — гибкий язык, и в нём можно создавать свои собственные атрибуты. Имена таких атрибутов начинаются с префикса data-, после которого идёт любое выбранное разработчиком слово. Это немного похоже на переменные: вы сами решаете, как назвать атрибут и какое он должен иметь значение.

Например:

<div data-cat-name="Кекс">

Атрибуты, начинающиеся с data-, обычно используют, чтобы хранить вспомогательную информацию. Подробнее о них вы можете почитать здесь.

Как получить значение такого атрибута в JavaScript? Для этого используют свойство dataset, после которого указывают имя атрибута без префикса data-:

элемент.dataset.имяАтрибутаБезПрефикса

Если имя атрибута состояло из нескольких слов и в нём были дефисы, то в JavaScript его записывают в «верблюжьем» стиле (по-английски camelCase): дефисы убирают, а каждое слово, кроме первого, пишут с большой буквы. Чтобы получить значение атрибута из примера выше, нужно использовать такие инструкции:

let element = document.querySelector('div');
console.log(element.dataset.catName); // Выведет: Кекс

На нашем сайте тексты подсказок хранятся в атрибутах data-tooltip-text. Посмотрим, как они выглядят в разметке, а после выведем в консоль значение этого атрибута каждой кнопки.