class Tooltip {
constructor() {
const dropShadowId = DOM.uid("dropShadow");
const dropShadow = svg`<filter id="${dropShadowId.id}" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="0" dy="2" stdDeviation="2" flood-opacity="0.5"/>
</filter>`;
const gradientId = DOM.uid("gradient");
const gradient = svg`<linearGradient id="${gradientId.id}" x1="0%" x2="0%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#ddfdef"/>
<stop offset="100%" stop-color="#fff"/>
</linearGradient>`;
this._padding = 12;
this._title = svg`<text x="${this._padding}" y="${this._padding}" dominant-baseline="hanging" font-family="var(--trase-sans-serif)" font-size="15px" font-weight="700" fill="#31464e"></text>`;
this._gradientRect = svg`<rect x="0" y="0" height="60" fill="${gradientId}" ></rect>`;
this._content = svg`<g transform="translate(${this._padding}, ${this._padding * 2 + 28})" font-family="var(--trase-mono)"></g>`;
this._contentRect = svg`<rect x="0" y="0" fill="#fff" filter="${dropShadowId}"></rect>`;
this.node = svg`<g id="tooltip" pointer-events="none" display="none">
<defs>${fonts}${dropShadow}${gradient}</defs>
${this._contentRect}
${this._gradientRect}
${this._title}
${this._content}
</g>`;
}
show(title, content) {
this.node.removeAttribute("display");
this._content.innerHTML = "";
this._contentRect.removeAttribute("height");
this._contentRect.removeAttribute("width");
this._gradientRect.removeAttribute("width");
this._title.textContent = title;
this._content.appendChild(content);
const bbox = this.node.getBBox();
this._gradientRect.setAttribute("width", bbox.width + this._padding * 2);
this._gradientRect.setAttribute("height", Math.min(bbox.height + this._padding * 2, 60));
this._contentRect.setAttribute("width", bbox.width + this._padding * 2);
this._contentRect.setAttribute("height", bbox.height + this._padding * 2);
}
position(x, y) {
this.node.setAttribute("transform", `translate(${x},${y})`);
}
hide() {
this.node.setAttribute("display", "none");
}
get width() {
return this.node.getBBox().width;
}
get height() {
return this.node.getBBox().height;
}
}