Домашнее задание к занятию 2.3 «Изменение структуры HTML-документа».
Необходимо написать всплывающую подсказку для элементов. Подсказка появляется после клика на элементе.
- Основная HTML-разметка
- Базовая CSS-разметка
Базовая разметка элемента, который нуждается в подсказке:
<a href="" class="has-tooltip" title="Что бы вы хотели?">Помогите пожалуйста</a>Шаблон подсказки выглядит так:
<div class="tooltip">Текст подсказки</div>Данные для текста подсказки берутся из атрибута title
Подсказки активируются классом tooltip_active
- Реализуйте появление подсказки на основе положения текста
- Показывайте подсказку при клике на элемент.
В один момент времени должна показываться только одна подсказка
Добавьте подсказке дополнительный атрибут data-position для настройки места появления подсказки:
- top - над текстом
- left - слева от текста
- right - справа от текста
- bottom - снизу от текста
- Перейти в папку задания.
cd ./document-structure/tooltip. - Открыть файл
task.jsв вашем редакторе кода и выполнить задание. - Открыть файл
task.htmlв вашем браузере и убедиться в правильности выводимых результатов. - Добавить файл
task.jsв индекс git с помощью командыgit add %file-path%, где %file-path% - путь до целевого файла.git add task.js. - Сделать коммит используя команду
git commit -m '%comment%', где %comment% - это произвольный комментарий к вашему коммиту.git commit -m 'first commit tooltip'. - Опубликовать код в репозиторий homeworks с помощью команды
git push -u origin master. - Прислать ссылку на репозиторий через личный кабинет на сайте Нетологии.
Никаких файлов прикреплять не нужно.
Все задачи обязательны к выполнению для получения зачета. Присылать на проверку можно каждую задачу по отдельности или все задачи вместе. Во время проверки по частям ваша домашняя работа будет со статусом "На доработке".
Любые вопросы по решению задач задавайте в чате учебной группы.