https://littlebirdelectronics.com.au/assets/controllers/ecommerce/lead_time_tip_controller-82186a4d.js

1import { Controller } from "@hotwired/stimulus"
2
3// Tap-to-reveal for the supplier lead-time tooltip on the PDP stock panel.
4//
5// The reveal is CSS-first: `group-hover:block` covers desktop and
6// `group-focus-within:block` covers keyboard, both without JS. But Tailwind v4
7// compiles group-hover INSIDE `@media (hover:hover)`, so on a phone it never
8// matches, and the only remaining path is :focus-within -- which Safari on iOS
9// does not reliably grant a <button> on tap. Left as pure CSS the lead time is
10// simply unreachable on mobile, which is where most of this storefront's
11// traffic is.
12//
13// So this adds only what CSS cannot do: a tap toggle, plus the dismissals
14// (Escape, tapping away) that a hover-only tooltip never needs.
15export default class extends Controller {
16  static targets = ["tip"]
17
18  connect() {
19    this.dismiss = (event) => {
20      if (!this.element.contains(event.target)) this.hide()
21    }
22    this.escape = (event) => {
23      if (event.key === "Escape") this.hide()
24    }
25    document.addEventListener("click", this.dismiss)
26    document.addEventListener("keydown", this.escape)
27  }
28
29  disconnect() {
30    document.removeEventListener("click", this.dismiss)
31    document.removeEventListener("keydown", this.escape)
32  }
33
34  toggle(event) {
35    event.preventDefault()
36    // Without this the document listener below fires on the same click and
37    // closes the tooltip in the same tick it was opened.
38    event.stopPropagation()
39    if (this.hasTipTarget) this.tipTarget.classList.toggle("hidden")
40  }
41
42  hide() {
43    if (this.hasTipTarget) this.tipTarget.classList.add("hidden")
44  }
45}