Практические шаблоны: всплывающие подсказки и отслеживание состояния
Используйте data-* для всплывающих подсказок, активных состояний и настройки компонентов
«Практические шаблоны: всплывающие подсказки и отслеживание состояния» — бесплатный урок HTML Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Всплывающая подсказка с data-tooltip
Храните текст всплывающей подсказки в data-tooltip элемента-триггера. CSS [data-tooltip]:hover::after { content: attr(data-tooltip) } отображает его без JavaScript. Для доступных всплывающих подсказок добавьте role="tooltip" и aria-describedby, указывающий на настоящий элемент.
Позиционирование всплывающих подсказок в CSS
Для триггера требуется position: relative. Псевдоэлемент ::after использует position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%), чтобы расположить подсказку по центру над триггером. Добавьте white-space: nowrap, чтобы предотвратить перенос строк.
Отслеживание состояния с data-state
Замените несколько логических классов (is-open, is-loading, is-error) одним атрибутом data-state: el.dataset.state = "loading". CSS выбирает [data-state="loading"] — один атрибут, одно правило CSS для каждого состояния и отсутствие управления классами.
Аккордеон с data-expanded
Каждый элемент аккордеона имеет data-expanded="false". JavaScript переключает его: item.dataset.expanded = item.dataset.expanded === "true" ? "false" : "true". CSS показывает или скрывает панель: [data-expanded="false"] .panel { display: none; }.
Активное состояние вкладки
Контейнер вкладок хранит активную вкладку: data-active-tab="0". JavaScript обновляет это значение при нажатии. CSS может выбрать активную панель с помощью [data-active-tab="0"] #panel-0. Всё состояние вкладок хранится в одном атрибуте контейнера.
Отслеживание шага формы
Многоэтапные формы хранят текущий шаг в data-step элемента формы. CSS показывает только соответствующий шаг: form[data-step="2"] .step-2 { display: block; }. Остальные шаги остаются скрытыми без переключения классов для каждого шага.
Шаблон состояния загрузки
Кнопки во время асинхронных действий: btn.dataset.state = "loading" отключает взаимодействие и показывает индикатор загрузки через CSS. После завершения установите btn.dataset.state = "idle". Один атрибут заменяет три отдельных переключения классов и проверку отключённого атрибута.
Шаблон маркера перетаскивания
Помечайте перетаскиваемые элементы с помощью data-draggable="true", а целевые области для сброса — с помощью data-droptarget="true". Обработчики событий используют селекторы атрибутов для поиска всех перетаскиваемых элементов: document.querySelectorAll("[data-draggable]"). Наличие атрибута семантичнее имён классов, когда он обозначает назначение поведения.
Индикатор прогресса
Компонент пошаговой навигации использует data-step-status для каждого шага: "completed", "current", "upcoming". CSS по-разному оформляет каждый статус. JavaScript устанавливает статус каждого шага на основе текущей позиции — состояние доступно для чтения без дублирующего объекта состояния JavaScript.
Сохранение темы
Сохраните предпочтение пользователя относительно темы в localStorage и примените его при загрузке: document.documentElement.dataset.theme = localStorage.getItem("theme") || "light". CSS выбирает [data-theme="dark"] для тёмного режима — настройка сохраняется, а FOUC не возникает, если скрипт выполняется в <head>.
Метаданные динамического содержимого
Списки, отрендеренные сервером, включают метаданные в атрибутах data: data-product-id, data-price, data-category. JavaScript читает их без дополнительных запросов к API для фильтрации, сортировки или работы корзины на основе уже отрендеренных данных.
Проверка знаний
Какое преимущество даёт использование data-state="loading" по сравнению с добавлением и удалением класса CSS?
Итоги
Атрибуты data-* позволяют реализовать мощные практические шаблоны: подсказки CSS с content:attr(), конечные автоматы с data-state вместо переключения нескольких классов, отслеживание многошаговой формы, сохранение темы через documentElement.dataset и метаданные, отрисованные на сервере, для функций на стороне клиента — всё это без зеркального отображения состояния в JavaScript.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 40
- Уроки
- 159
Часто задаваемые вопросы
Урок «Практические шаблоны: всплывающие подсказки и отслеживание состояния» бесплатный?
Да — полный текст урока «Практические шаблоны: всплывающие подсказки и отслеживание состояния» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «Практические шаблоны: всплывающие подсказки и отслеживание состояния»?
Используйте data-* для всплывающих подсказок, активных состояний и настройки компонентов Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Практические шаблоны: всплывающие подсказки и отслеживание состояния»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Синтаксис data-* и соглашения об именовании
- Доступ к data-* через dataset в JavaScript
- Использование data-* с селекторами атрибутов CSS
- Практические шаблоны: всплывающие подсказки и отслеживание состояния