/** Manage the content, visibility and viewport placement of one tooltip. */
export class Tooltip {
  constructor(element) {
    this.element = element;
    this.anchor = null;
  }

  setText(text) {
    this.element.textContent = text;
    this.place();
  }

  setHtml(html) {
    this.element.innerHTML = html;
    this.place();
  }

  show(anchor) {
    this.anchor = anchor;
    anchor.setAttribute("aria-describedby", this.element.id);
    this.element.classList.remove("hidden");
    this.place();
  }

  hide() {
    if (this.anchor) this.anchor.removeAttribute("aria-describedby");
    this.anchor = null;
    this.element.classList.add("hidden");
  }

  place() {
    if (!this.anchor || this.element.classList.contains("hidden")) return;
    const rect = this.anchor.getBoundingClientRect();
    const left = Math.max(8, Math.min(rect.left, window.innerWidth - this.element.offsetWidth - 8));
    let top = rect.bottom + 8;
    if (top + this.element.offsetHeight > window.innerHeight - 8) {
      top = Math.max(8, rect.top - this.element.offsetHeight - 8);
    }
    this.element.style.left = `${left}px`;
    this.element.style.top = `${top}px`;
  }
}