hidePopover with button click not timeout

[Jxck]

as mentioned by @keithamus at https://github.com/whatwg/html/issues/10428#issuecomment-2186785118 closing popover with timeout (time based UI) is not in conformance with WCAG 2.2.3.

But the current sample code in the spec expresses it. so it should be replaced with "explicitly closed manner".

I respect the current code as-is and adding minimal fixes. If I can refuctoring whole code (indentation, id name, code flow etc), I'd love to do that too.

Thanks Jxck

---

/popover.html ( diff )

[Jxck]

for ease of review

<img id="image" src="cat.js" alt="pretty kitten">
<div id="tooltip" popover>
  <output></output>
  <button popovertarget="message" popovertargetaction="hide">x</button>
</div>

<script>
  const $img = document.querySelector("#image")
  const $tooltip = document.querySelector("#tooltip")
  const $output = $tooltip.querySelector("output")

  $img.addEventListener("pinterover", () => {
    $output.textContent = $img.alt
    $tooltip.showPopover()
  })
  $img.addEventListener("pinterleave", () => {
    $tooltip.showPopover()
  })
</script>

[Jxck]

@keithamus any other comments ?

[josepharhar]

I'm not a fan of the php style $ at the beginning of variable names and lack of semicolons at the end of lines, but I'm not sure if there is any such style guide for the HTML spec example code.

[Jxck]

To avoid extra effort, we would like to avoid modifications based on someone's preferences. Can I have a style guide for here ?

[josepharhar]

To avoid extra effort, we would like to avoid modifications based on someone's preferences. Can I have a style guide for here ?

I don't think there is a style guide and I'm not an editor of this spec, so I'll defer to the editors for this.

[Jxck]

@josepharhar it's been done for now. PTL again plz.