Критерии сдачи:

Задание 1. Спрячьте сообщения с помощью делегирования.

Создайте кнопку и блок с lorem текстом. Добавьте JavaScript к кнопке button, чтобы при нажатии элемент <div id="text"> исчезал.

Задание 2. Раскрывающееся дерево.

Создайте дерево, которое по клику на заголовок скрывает-показывает потомков:

• Животные
  • Млекопитающие
    • Коровы
    • Ослы
    • Собаки
    • Тигры
  • Другие
    • Змеи
    • Птицы
    • Ящерицы
• Рыбы
  • Аквариумные
    • Гуппи
    • Скалярии
  • Морские
    • Морская форель

Требования:

• Использовать только один обработчик событий (применить делегирование)
• Клик вне текста заголовка (на пустом месте) ничего делать не должен.

Задание 3. Поведение "подсказка".

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

Пример HTML с подсказками:

<button data-tooltip="эта подсказка длиннее, чем элемент">Короткая кнопка</button>

<button data-tooltip="HTML<br>подсказка">Ещё кнопка</button>

В этой задаче мы полагаем, что во всех элементах с атрибутом data-tooltip – только текст. То есть, в них нет вложенных тегов (пока).

Детали оформления:

• Отступ от подсказки до элемента с data-tooltip должен быть 5px по высоте.
• Подсказка должна быть, по возможности, посередине элемента.
• Подсказка не должна вылезать за границы экрана, в том числе если страница частично прокручена, если нельзя показать сверху – показывать снизу элемента.
• Текст подсказки брать из значения атрибута data-tooltip. Это может быть произвольный HTML.

Для решения вам понадобятся два события:

• mouseover срабатывает, когда указатель мыши заходит на элемент.
• mouseout срабатывает, когда указатель мыши уходит с элемента.

Примените делегирование событий: установите оба обработчика на элемент document, чтобы отслеживать «заход» и «уход» курсора на элементы с атрибутом data-tooltip и управлять подсказками с их же помощью.

После реализации поведения – люди, даже не знакомые с JavaScript смогут добавлять подсказки к элементам.

P.S. В один момент может быть показана только одна подсказка.