43 lines
1.1 KiB
JavaScript
43 lines
1.1 KiB
JavaScript
/** 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`;
|
|
}
|
|
}
|