Всплывающая подсказка на Javascript
Необходимо написать всплывающую подсказку для элементов. Подсказка появляется после клика на элементе Исходные данные
- Основная HTML-разметка
- Базовая CSS-разметка
Базовая разметка элемента, который нуждается в подсказке:
<a href="" class="has-tooltip" title="Что бы вы хотели?">Помогите пожалуйста</a>
Шаблон подсказки выглядит так:
<div class="tooltip">Текст подсказки</div>
Данные для текста подсказки берутся из атрибута title
Подсказки активируются классом tooltip_active
Процесс реализации
Реализуйте появление подсказки на основе положения текста Показывайте подсказку при клике на элемент.
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Всплывающая подсказка</title>
<link rel="stylesheet" href="task.css">
<link rel="stylesheet" href="../../assets/css/style.css">
</head>
<body>
<header class="header">
<div class="logo__container">
<a href="https://netology.ru/" class="logo__link"></a>
</div>
<h1 class="header__title">
Домашнее задание к занятию 2.3 «Изменение структуры HTML-документа». Всплывающая подсказка.
</h1>
</header>
<a href="" class="has-tooltip" title="Что бы вы хотели?">Помогите пожалуйста</a>
<!-- <div class="tooltip" style="left: 0; top: 0">
Проверка!
</div> -->
<a href="" class="has-tooltip" title="Устройтесь на работу!">Нажми сюда и выиграй миллион!</a>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi facere dolor dicta accusamus corporis itaque quam deleniti, earum similique alias nostrum corrupti aspernatur, beatae, veniam vel quidem tenetur, odit reiciendis.</div>
<div>Laboriosam aliquid neque in itaque at eaque, similique nisi consequatur voluptatem nam blanditiis eum ab, pariatur, harum molestias quas veniam. Aliquam maxime ipsa neque earum accusantium suscipit quasi. Harum, atque.</div>
<div>Commodi fugiat vitae facere, provident voluptatem architecto reprehenderit. Nemo natus, qui quia animi voluptatibus. Cupiditate dolores, ducimus, nihil adipisci nemo dolorum aliquam eveniet obcaecati aperiam quis eum corporis velit! Esse.</div>
<div>Earum deleniti laborum sunt ea, inventore voluptatum. Excepturi maiores laboriosam fugit, inventore hic quae ipsum, sequi ipsam expedita quisquam provident velit dolorum natus atque qui dignissimos numquam, quam, debitis! Error!</div>
<div>Autem iure cum, accusantium soluta dolor beatae voluptas, ipsa ad quas dignissimos. Laboriosam laborum praesentium necessitatibus cumque tempore animi similique corporis quas, ipsam suscipit id possimus deserunt vitae incidunt eos.</div>
<div>Autem, temporibus, nihil. Debitis quasi ex minus, delectus
<a href="" class="has-tooltip" title="Это просто подсказка!">Для просмотра подсказки нажмите сюда</a>
doloremque officiis sint facere, ducimus impedit! Sit, minima, et modi reiciendis sequi quo, voluptas dignissimos fugit veritatis quis nobis dolor saepe. Nobis!</div>
<div>Itaque eum maxime tempora soluta, impedit placeat, dolores quod esse quibusdam saepe consequatur pariatur maiores? Ex minima delectus unde sit repudiandae quidem maxime non velit aliquam temporibus nulla, magnam, laboriosam!</div>
<div>Eum maiores doloribus, unde vel, doloremque, perferendis amet perspiciatis et distinctio natus veniam tempora magni possimus. Eius repellat molestiae nihil deserunt accusantium provident soluta eligendi, sequi possimus suscipit, laudantium, rem!</div>
<div>Odit voluptas quisquam minus id magni, temporibus cupiditate rem aspernatur nihil ipsam? Minima, tempora perspiciatis doloribus ut nulla. Magni tempore repellendus voluptatem nisi esse minima ipsam, saepe facere et qui?</div>
<div>Esse molestiae dolore hic sunt asperiores vitae odio ab voluptatum provident corporis, voluptates ducimus reiciendis inventore, placeat quasi minima dicta nemo voluptas voluptate unde, culpa illum? Modi qui, officia nobis.</div>
<div>Enim blanditiis nesciunt, repudiandae, ipsa accusantium quos vitae magnam modi? Quia eaque natus officiis excepturi adipisci optio voluptate quis ut <a href="" class="has-tooltip" title="Не важный текст подсказки">Посмотреть</a> praesentium vero. Adipisci pariatur molestias harum ullam, incidunt blanditiis officia!</div>
<div>Beatae aspernatur eveniet doloribus ullam magnam, reprehenderit odio eius, laboriosam voluptatum cupiditate voluptate officiis fuga neque, inventore magni, labore assumenda porro dolores quidem. Accusantium temporibus consectetur architecto ab, a suscipit?</div>
<div>Sit dicta eos magni vel quae est debitis ipsam eligendi veniam totam et perspiciatis reprehenderit itaque excepturi omnis autem nihil explicabo sequi ut optio, officia voluptates sed? Ipsam, rerum maiores.</div>
<div>Doloremque fugiat nemo ea, id praesentium illum ab soluta cumque labore nam. Itaque reprehenderit vitae aliquid debitis rerum temporibus cupiditate quos dignissimos! Praesentium molestias provident vero quia esse recusandae magni.</div>
<div>Soluta, rem reprehenderit dignissimos excepturi aut alias natus dicta, cumque, sequi, perferendis facere! Neque debitis veritatis ratione in aut, consectetur incidunt sunt cupiditate exercitationem! Perferendis nemo molestias facilis perspiciatis voluptas.</div>
<div>Totam dicta esse iure <a href="" class="has-tooltip" title="Подсказка открыта">Посмотреть подсказку</a> repudiandae asperiores culpa accusamus facilis magnam aut nemo earum quia provident necessitatibus, nihil amet, praesentium voluptatibus animi temporibus libero dolorem quis eveniet dolore debitis nisi. Suscipit.</div>
<div>Dolores, inventore, minima. Aut assumenda laudantium praesentium, molestiae cumque incidunt animi necessitatibus ut laboriosam. Porro cupiditate laboriosam, eum dicta ut repudiandae aliquam explicabo soluta. Quidem molestiae numquam unde accusantium quasi!</div>
<div>Eveniet iusto, placeat architecto enim fugiat obcaecati, ullam perferendis in culpa commodi, provident magnam similique natus nobis. Illum, dolores, voluptate placeat laboriosam soluta cupiditate possimus, ea aspernatur quis debitis sint.</div>
<div>Eligendi reiciendis doloremque veritatis rerum corporis voluptatem est expedita porro fuga quae. Nam hic asperiores consequatur odit, ea, illo vitae quis non, aperiam tenetur architecto sint, nisi iure ipsum laudantium.</div>
<div>Ad, repellendus doloremque. Debitis molestiae recusandae vero, quasi autem iusto mollitia deserunt odio delectus voluptatum dicta quae, tempora sint doloremque rem. Quod eum fugiat magni nostrum, dolore eligendi vel nisi.</div>
<a href="" class="has-tooltip" title="Выхода нет, скоро рассвет">Конец страницы</a>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut aspernatur praesentium ipsum perferendis voluptas omnis ab quidem, corrupti corporis aperiam, architecto, doloremque sequi at nisi fugit quaerat molestiae quae consectetur!</div>
<div>Modi ab asperiores est quae consectetur inventore perferendis! Voluptatibus cumque voluptate repellat, earum ad nulla et natus eligendi. Repellat ad iusto facilis dolorem recusandae, modi suscipit sapiente soluta nihil quam!</div>
<script src="task.js"></script>
</body>
</html>
let toolLinks = document.querySelectorAll('.has-tooltip');
let tooltip = document.querySelector('.tooltip');
function handleClick(event) {
event.preventDefault();
let target = event.target;
let title = target.getAttribute('title');
tooltip.classList.add('tooltip_active');
tooltip.innerText = title;
tooltip.style.top = target.offsetTop + target.offsetHeight + 'px';
tooltip.style.left = target.offsetLeft + 'px';
}
for (let i = 0; i < toolLinks.length; i++) {
toolLinks[i].addEventListener('click' , handleClick);
}
вот JS код , который пытался написать но не работает. Можете подсказать где ошибка или предложить свое решение?
Источник: Stack Overflow на русском