import Diff from "scripts/Diff" export default class ToolTip extends HTMLElement { anchor: HTMLElement box: HTMLElement arrow: HTMLElement connectedCallback() { this.box = document.createElement("div") this.box.classList.add("box") this.appendChild(this.box) this.arrow = document.createElement("div") this.arrow.classList.add("arrow") this.appendChild(this.arrow) } hide() { this.setAttribute("active", "false") } show(anchor: HTMLElement) { const distanceToBorder = 5 this.anchor = anchor this.box.textContent = this.anchor.getAttribute("aria-label") const anchorRect = this.anchor.getBoundingClientRect() const boxRect = this.box.getBoundingClientRect() let finalX = anchorRect.left + anchorRect.width / 2 - boxRect.width / 2 let finalY = anchorRect.top - boxRect.height const contentRect = { left: distanceToBorder, top: distanceToBorder, right: document.body.clientWidth - distanceToBorder, bottom: document.body.clientHeight - distanceToBorder } let offsetX = 0 let offsetY = 0 if(finalX < contentRect.left) { offsetX = contentRect.left - finalX finalX += offsetX } else if(finalX + boxRect.width > contentRect.right) { offsetX = contentRect.right - (finalX + boxRect.width) finalX += offsetX } if(finalY < contentRect.top) { offsetY = contentRect.top - finalY finalY += offsetY } const arrowX = boxRect.width / 2 - offsetX Diff.mutations.queue(() => { this.style.left = finalX + "px" this.style.top = finalY + "px" this.arrow.style.left = arrowX + "px" this.setAttribute("active", "true") }) } }