class Tooltip { constructor() { const dropShadowId = DOM.uid("dropShadow"); const dropShadow = svg` `; const gradientId = DOM.uid("gradient"); const gradient = svg` `; this._padding = 12; this._title = svg``; this._gradientRect = svg``; this._content = svg``; this._contentRect = svg``; this.node = svg``; } show(title, content) { // remove existing attributes this.node.removeAttribute("display"); this._content.innerHTML = ""; this._contentRect.removeAttribute("height"); this._contentRect.removeAttribute("width"); this._gradientRect.removeAttribute("width"); // add tooltip title and content this._title.textContent = title; this._content.appendChild(content); // resize to accomodate 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; } }

Purpose-built for displays of data