HTML Diff
0 added 0 removed
Original 2026-01-01
Modified 2026-03-09
1 <p>We have already learned about data attributes, and we learned how to output the value of the data-tooltip-text attribute for both buttons to the console. We need this attribute to show the correct tooltip. If the user clicked the first button, then the attribute text for the first button should appear inside the pop-up. If the second button is clicked, then the attribute text for the second button is displayed.</p>
1 <p>We have already learned about data attributes, and we learned how to output the value of the data-tooltip-text attribute for both buttons to the console. We need this attribute to show the correct tooltip. If the user clicked the first button, then the attribute text for the first button should appear inside the pop-up. If the second button is clicked, then the attribute text for the second button is displayed.</p>
2 <p>We will output the text in the element with the tooltip-text class. It is located inside the pop-up in the markup:</p>
2 <p>We will output the text in the element with the tooltip-text class. It is located inside the pop-up in the markup:</p>
3 &lt;div class="tooltip"&gt; &lt;span class="tooltip-text"&gt;&lt;/span&gt; &lt;button class="button close-button" type="button"&gt; &lt;span&gt;Close&lt;/span&gt; &lt;/button&gt; &lt;/div&gt;<p>Find this element, save it to the variable, and change its text content. Use the text from the first button attribute inside the first event handler, and use the text from second button attribute inside the second event handler. Click on both buttons to test whether correct tooltip text is displayed in the pop-up.</p>
3 &lt;div class="tooltip"&gt; &lt;span class="tooltip-text"&gt;&lt;/span&gt; &lt;button class="button close-button" type="button"&gt; &lt;span&gt;Close&lt;/span&gt; &lt;/button&gt; &lt;/div&gt;<p>Find this element, save it to the variable, and change its text content. Use the text from the first button attribute inside the first event handler, and use the text from second button attribute inside the second event handler. Click on both buttons to test whether correct tooltip text is displayed in the pop-up.</p>
4 <p><i>This is the exact moment when Muffin ran across the keyboard (he was probably hurrying somewhere and he decided to take a shortcut), and all text that was output to the console disappeared from the screen.</i></p>
4 <p><i>This is the exact moment when Muffin ran across the keyboard (he was probably hurrying somewhere and he decided to take a shortcut), and all text that was output to the console disappeared from the screen.</i></p>