Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Check the pop-up tooltips
Meow! The new intern tried to create tooltips, but he wasn’t able to figure it out. I can rely on you. Figure out why the script doesn’t work!
The news site we worked on in previous chapters covers events in the IT world, and sometimes news stories mention little-known names and complex concepts. To prevent visitors from leaving the news page to search for these terms (after all, as you know, search engines are full of cat photos), Muffin decided to add pop-up tooltips directly to the news page.
Words that require explanation are laid out as buttons with the tooltip-button class:
<button class="tooltip-button" type="button">DogDrones.inc</button>When you click on the word-button, a small pop-up window should appear. A tooltip is displayed inside the pop-up.
The intern who worked on this assignment before used the querySelector method to find the required elements, and he added onclick event handlers to the word-buttons. When you click on the button, the opened class is added to the pop-up, and a tooltip appears on the page:
let tooltip = document.querySelector('.tooltip');
let tooltipButton = document.querySelector('.tooltip-button');
tooltipButton.onclick = function () {
tooltip.classList.add('opened');
};If you click on the “Close” button inside the pop-up, the opened class will be removed, and the tooltip will disappear from the page:
let closeButton = document.querySelector('.close-button');
closeButton.onclick = function () {
tooltip.classList.remove('opened');
};You have already learned about these types of instructions, and it seems that the code does not contain any errors. But the boss claims that the script does not work. Let’s try to figure out what the problem is.
Although onclick sounds like it’s only a mouse action, it also works for visitors using touch screens or their keyboards. As W3C write
the onclick event is actually mapped to the default action of a link or button. The default action occurs when the user clicks the element with a mouse, but it also occurs when the user focuses the element and hits enter or space
Therefore, we don’t need to do anything extra to make links and buttons are accessible and inclusive to all.
Files
- tooltip.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
<title>FlashNews!</title>
</head>
<body class="page light-theme">
<header class="page-header">
<div class="container">
<span class="header-logo">
<img src="img/main-logo.svg" width="67" height="29" alt="FlashNews! portal logo">
</span>
<button class="theme-button" type="button">Change the theme</button>
</div>
</header>
<main class="inner-news">
<div class="tooltip">
<span class="tooltip-text"></span>
<button class="button close-button" type="button"><span>Close</span></button>
</div>
<article class="container">
<h1 class="inner-heading">Dronovirus</h1>
<div class="news-full">
<img src="img/drone.jpg" alt="A small drone">
<div class="news-stats">
<button class="heart" type="button"><span class="likes-number">50</span></button>
<time datetime="2019-12-22">December 22, 2019</time>
</div>
<p>The designers from the <button class="tooltip-button" type="button" data-tooltip-text="That's not a laboratory that inspires confidence">DogDrones.inc</button> laboratory have assured the public that their drones cannot be carriers of dangerous viruses, since their programming did not include this ability. <button class="tooltip-button" type="button" data-tooltip-text="This is not quite accurate – Legal disclaimer">Frankly speaking</button>, laboratory drones can't carry anything at all.</p>
</div>
</article>
<section class="comment-feed container">
<h2>Comments</h2>
<ol class="comment-list">
</ol>
<form action="https://echo.htmlacademy.ru/courses" method="post" class="comment-form">
<div class="comment-inner">
<label class="comment-label" for="comment-textarea">your comment</label>
<textarea class="comment-field comment-area" rows="3" placeholder="Comment" required id="comment-textarea"></textarea>
</div>
<span class="text-counter"><span class="char-counter">0</span>/142 characters used</span>
<button class="button submit-button" type="submit">Submit</button>
</form>
</section>
</main>
<footer class="page-footer">
<div class="container">
<p>© FlashNews!</p>
<span class="footer-logo">
<img src="img/white-logo.svg" alt="FlashNews! portal logo">
</span>
</div>
</footer>
<script src="themes.js"></script>
<script src="likes.js"></script>
<script src="comments.js"></script>
<script src="tooltip.js"></script>
</body>
</html>
/* Button text styles */
.tooltip-button {
cursor: pointer;
position: relative;
padding: 1px 8px;
border: none;
color: inherit;
font: inherit;
}
.tooltip-button::after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 0;
border: 4px solid;
border-left-color: transparent;
border-bottom-color: transparent;
}
/* Tooltip styles */
@keyframes tooltip-opener {
0% {
transform: translate(50%) scaleX(0);
}
100% {
transform: translate(100%) scaleX(100%);
}
}
.tooltip {
z-index: 2;
display: none;
flex-direction: row-reverse;
position: fixed;
max-width: 256px;
right: 0;
top: 160px;
border-radius: 8px 0 0 8px;
}
.opened {
display: flex;
animation: tooltip-opener 150ms;
}
.tooltip-text {
display: flex;
align-items: center;
padding: 10px;
}
.close-button {
min-height: 64px;
display: flex;
justify-content: center;
align-items: center;
width: 30px;
margin: 0;
padding: 0;
border-radius: 8px 0 0 8px;
}
.close-button span {
display: inline-block;
vertical-align: middle;
transform: rotate(-90deg);
}
/* Comment entry block styles */
.comment-area {
height: unset;
resize: none;
margin-bottom: 10px;
padding-top: 4px;
padding-bottom: 4px;
line-height: 24px;
}
.text-counter {
display: inline-block;
vertical-align: baseline;
padding: 7px 0;
margin-right: auto;
}
.comment-form.warning .comment-label {
color: #f05b29;
}
.comment-form.warning .comment-area {
color: #f05b29;
border-color: #f05b29;
}
.comment-form.warning .comment-area:focus {
outline-color: #f05b29;
}
.comment-form.warning .char-counter {
color: #f05b29;
font-weight: bold;
}
.submit-button:disabled {
opacity: 0.25;
}
/* Color schemes */
.light-theme .tooltip {
background-color: #ffffff;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
}
.light-theme .tooltip-button {
background-color: #f2f2f2;
}
.light-theme .tooltip-button:focus,
.light-theme .tooltip-button:hover {
background-color: #6653d9;
color: #ffffff;
outline-color: #b6aaff;
}
.tooltip-button:active {
opacity: 0.6;
}
.light-theme .tooltip-button::after {
border-right-color: #6653d9;
border-top-color: #6653d9;
}
.dark-theme .tooltip {
background-color: #2a2930;
box-shadow: 0 0 16px rgba(0, 0, 0, 1);
}
.dark-theme .tooltip-button {
background-color: #0a0910;
}
.dark-theme .tooltip-button:focus,
.dark-theme .tooltip-button:hover {
outline-color: #6653d9;
background-color: #b6aaff;
color: #17161a;
}
.dark-theme .tooltip-button::after {
border-right-color: #b6aaff;
border-top-color: #b6aaff;
}
let tooltip = document.querySelector('.tooltip');
let tooltipButton = document.querySelector('.tooltip-button');
let closeButton = document.querySelector('.close-button');
tooltipButton.onclick = function () {
tooltip.classList.add('opened');
};
closeButton.onclick = function () {
tooltip.classList.remove('opened');
};
let commentForm = document.querySelector('.comment-form');
let commentList = document.querySelector('.comment-list');
let commentField = document.querySelector('.comment-field');
commentForm.onsubmit = function (evt) {
evt.preventDefault();
let newComment = document.createElement('li');
newComment.classList.add('user-comment');
newComment.textContent = commentField.value;
commentField.value = '';
commentList.append(newComment);
};
let page = document.querySelector('.page');
let themeButton = document.querySelector('.theme-button');
themeButton.onclick = function () {
page.classList.toggle('light-theme');
page.classList.toggle('dark-theme');
};
let heart = document.querySelector('.heart');
let likesNumber = document.querySelector('.likes-number');
heart.onclick = function () {
if (heart.classList.contains('added')) {
likesNumber.textContent--;
} else {
likesNumber.textContent++;
}
heart.classList.toggle('added');
};
- drones.html
- style.css
- tooltip.js
- comments.js
- themes.js
- likes.js
1
2
let tooltip = document.querySelector('.tooltip');
let tooltipButton = document.querySelector('.tooltip-button');
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Thanks! We’ll fix everything at once!
The code has changed, click “Refresh” or turn autorun on.
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
100%
Console
- In the mini-browser, click in the news text on
DogDrones.inc. Close the pop-up that appears on the right by clicking on the “Close” button. - Click on the words
Frankly speaking. Notice how the pop-up did not appear. - In the code editor, open the
All filestab and go to thedrones.htmlfile. Notice how in the markup (line 34) both buttons have thetooltip-buttonclass.
Comments