https://www.lemonink.co/assets/controllers/tooltip_controller-dcc9a90f.js

1import { Controller } from "@hotwired/stimulus";
2
3function template({ text }) {
4  return `<div role="tooltip" class="li-tooltip__tooltip"><div class="li-tooltip__text">${text}</div></div>`;
5}
6
7export default class TooltipController extends Controller {
8  connect() {
9    this.element.addEventListener("mouseenter", this.show.bind(this));
10    this.element.addEventListener("mouseleave", this.hide.bind(this));
11  }
12
13  disconnect() {
14    this.hide();
15  }
16
17  show() {
18    const parent = this.element.closest("dialog") || document.body;
19    if (!this.tooltipElement) {
20      let text = this.element.getAttribute("aria-label")
21      if (this.splitValue) {
22        text = text.split("/").join("/ <br>").split("|").join("<br>")
23      }
24      parent.insertAdjacentHTML(
25        "beforeend",
26        template({ text }),
27      );
28      this.tooltipElement = parent.lastElementChild;
29    } else {
30      parent.append(this.tooltipElement);
31    }
32    const rect = this.element.getBoundingClientRect();
33    this.tooltipElement.style.left = `${rect.left + rect.width / 2 + window.scrollX}px`;
34    this.tooltipElement.style.top = `${rect.top + rect.height + window.scrollY}px`;
35  }
36
37  hide() {
38    this.tooltipElement?.remove();
39  }
40}