https://codefor.kr/assets/controllers/base/tooltip_controller-6e2544d4.js

1import { Controller } from "@hotwired/stimulus"
2import { createPopper } from "@popperjs/core"
3
4/**
5 * @domain 오버레이 UI
6 * @concern 툴팁 패널의 열림/닫힘과 위치 계산
7 * @description template 콘텐츠를 복제해 body에 붙이고 Popper.js로 위치를 계산해 툴팁을 표시하며, 닫을 때 팝퍼 인스턴스와 패널을 정리하는 컨트롤러
8 */
9export default class extends Controller {
10  static targets = ["template"]
11
12  show() {
13    if (this.panel || !this.hasTemplateTarget) return
14
15    this.panel = this.templateTarget.content.firstElementChild.cloneNode(true)
16    document.body.appendChild(this.panel)
17
18    this.popper = createPopper(this.element, this.panel, {
19      placement: "bottom",
20      modifiers: [
21        { name: "offset", options: { offset: [0, 8] } },
22        { name: "flip", options: { fallbackPlacements: ["top", "left", "right"] } },
23        { name: "preventOverflow", options: { boundary: document.body } }
24      ]
25    })
26  }
27
28  hide() {
29    this.popper?.destroy()
30    this.panel?.remove()
31    this.popper = this.panel = null
32  }
33
34  disconnect() {
35    this.hide()
36  }
37}