0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<blockquote><p>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!</p>
1
<blockquote><p>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!</p>
2
</blockquote><p>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.</p>
2
</blockquote><p>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.</p>
3
<p>Words that require explanation are laid out as buttons with the tooltip-button class:</p>
3
<p>Words that require explanation are laid out as buttons with the tooltip-button class:</p>
4
<button class="tooltip-button" type="button">DogDrones.inc</button><p>When you click on the word-button, a small pop-up window should appear. A tooltip is displayed inside the pop-up.</p>
4
<button class="tooltip-button" type="button">DogDrones.inc</button><p>When you click on the word-button, a small pop-up window should appear. A tooltip is displayed inside the pop-up.</p>
5
<p>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:</p>
5
<p>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:</p>
6
let tooltip = document.querySelector('.tooltip'); let tooltipButton = document.querySelector('.tooltip-button'); tooltipButton.onclick = function () { tooltip.classList.add('opened'); };<p>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:</p>
6
let tooltip = document.querySelector('.tooltip'); let tooltipButton = document.querySelector('.tooltip-button'); tooltipButton.onclick = function () { tooltip.classList.add('opened'); };<p>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:</p>
7
let closeButton = document.querySelector('.close-button'); closeButton.onclick = function () { tooltip.classList.remove('opened'); };<p>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.</p>
7
let closeButton = document.querySelector('.close-button'); closeButton.onclick = function () { tooltip.classList.remove('opened'); };<p>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.</p>
8
<p>Although onclick sounds like it’s only a mouse action, it also works for visitors using touch screens or their keyboards. As <a>W3C write</a></p>
8
<p>Although onclick sounds like it’s only a mouse action, it also works for visitors using touch screens or their keyboards. As <a>W3C write</a></p>
9
<blockquote>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</blockquote><p>Therefore, we don’t need to do anything extra to make links and buttons are accessible and inclusive to all.</p>
9
<blockquote>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</blockquote><p>Therefore, we don’t need to do anything extra to make links and buttons are accessible and inclusive to all.</p>