html · level 3 · unit 6 · lesson 2
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
makes a note that pops up on top of the page.
Add the popover attribute to any element and it hides. Give it an id, then give a <button> a popovertarget with that id. Pressing the button shows the popover on top of everything else.
Popovers close by : click anywhere outside, or press Esc. Pressing the button again closes it too.
Want separate buttons to open and close it? Add popovertargetaction="show" to one and popovertargetaction="hide" to the other. The browser makes it all work with the keyboard as well.
<p>Delivery is free over £30.
<button popovertarget="delivery-info">How it works</button>
</p>
<div id="delivery-info" popover>
<h2>Free delivery</h2>
<p>Spend £30 or more in one order and we deliver free anywhere in Leeds.</p>
</div>Press show my page to see it here.
A popover starts hidden, so the page looks the same until someone presses the button.
guess first
What shows before the button is pressed?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<button popovertarget="sizes">Size guide</button>
<div id="sizes" popover>
<p>Small fits ages 3 to 5. Large fits ages 6 to 9.</p>
</div>your turn
Your turn. Wire up the button.
Point the button on line 1 at the note's id, then fill the blank on line 2 to make the note a popover.
Press show my page to see it here.
- the note is a popovernot checked yet
- the note starts hiddennot checked yet
- the button opens the allergy notenot checked yet
fix it
The button does nothing. Can you fix it?
Press show my page to see it here.
- the button names the popover's idnot checked yet
- the times stay hidden until pressednot checked yet
- The button must name exactly the popover it opens. Compare the two names.
popovertargetsays opening, but the popover's id is opening-times.- Change
popovertarget="opening"topopovertarget="opening-times"on line 1.
nailed it
your notes pop up on cue. :D
popoverhides an element until it is opened.popovertargeton a button names the popover's id.- Light dismiss closes it with a click outside or Esc.
new words in your collection
- popover
- light dismiss
This lesson isn’t saved. A free account remembers every lesson you finish.