@hpcc-js/html 2.44.3 → 2.44.4

package/src/HTMLTooltip.ts

@@ -1,385 +1,385 @@
-import { HTMLWidget } from "@hpcc-js/common";
-import { scopedLogger, ScopedLogging } from "@hpcc-js/util";
-import { select as d3Select } from "d3-selection";
-
-type Direction = "n" | "s" | "e" | "w" | "ne" | "nw" | "se" | "sw";
-type Position = { x: number, y: number };
-type DirectionalBBox = { [key in Direction]: Position; };
-
-type Rectangle = { top: number, left: number, width: number, height: number };
-export class HTMLTooltip extends HTMLWidget {
-
-    public _triggerElement;
-    public _contentNode;
-    protected _prevContentNode;
-
-    protected _tooltipElement;
-    protected _arrowElement;
-    protected _tooltipHTMLCallback = (data?) => "<b>_tooltipHTMLCallback is undefined</b>";
-    protected _logger: ScopedLogging = scopedLogger("html/HTMLTooltip");
-    constructor() {
-        super();
-        this.visible(false);
-    }
-
-    tooltipHTML(_: (data?) => string): this {
-        this._tooltipHTMLCallback = _;
-        return this;
-    }
-
-    tooltipContent(_): this {
-        if (!arguments.length) return this._contentNode;
-        this._contentNode = _;
-        return this;
-    }
-
-    triggerElement(_): this {
-        this._triggerElement = _;
-        return this;
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        const body = d3Select("body");
-        this._tooltipElement = body.append("div")
-            .attr("class", "tooltip-div")
-            .style("z-index", "2147483638")
-            .style("position", "fixed")
-            ;
-        this._arrowElement = body.append("div")
-            .attr("class", "arrow-div")
-            .style("z-index", "2147483638")
-            .style("position", "fixed")
-            ;
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-
-        if(this._contentNode !== this._prevContentNode){
-            const node = this._tooltipElement.node();
-            [...node.querySelectorAll("*")]
-            .map(n=>n.__data__)
-            .filter(n=>n)
-            .forEach(w=>{
-                if(typeof w.target === "function"){
-                    w.target(null);
-                }
-                if(typeof w.exit === "function"){
-                    w.exit();
-                }
-            });
-            node.innerHTML = "";
-            node.appendChild(this._contentNode);
-            this._prevContentNode = this._contentNode;
-        }
-
-        if (this._contentNode) {
-            this.onShowContent(this._contentNode);
-        } else {
-            this._tooltipElement
-                .html(() => {
-                    return this._tooltipHTMLCallback(this.data());
-                });
-        }
-        if(this.fitContent()){
-            this._tooltipElement
-                .style("width", "auto")
-                .style("height", "auto")
-                .style("padding", "0px")
-                .style("box-sizing", "content-box")
-                ;
-            const rect = this._tooltipElement.node().getBoundingClientRect();
-            this.tooltipWidth_default(rect.width);
-            this.tooltipHeight_default(rect.height);
-        }
-        this._closing = false;
-        this._tooltipElement
-            .style("background-color", this.tooltipColor())
-            .style("color", this.fontColor())
-            .style("width", this.tooltipWidth() + "px")
-            .style("height", this.tooltipHeight() + "px")
-            .style("opacity", 1)
-            .style("padding", this.padding() + "px")
-            .style("pointer-events", this.enablePointerEvents() ? "all" : "none")
-            .style("box-sizing", "content-box")
-            ;
-        this._arrowElement
-            .style("opacity", 1)
-            .style("pointer-events", "none")
-            ;
-        this.updateTooltipPosition();
-    }
-
-    onShowContent(node) {
-        
-    }
-
-    protected updateTooltipPosition(): Position {
-        const bbox = this.calcReferenceBBox();
-        const direction = this.calcTooltipDirection(bbox);
-        const box = bbox[direction];
-        this._tooltipElement
-            .style("top", box.y + "px")
-            .style("left", box.x + "px")
-            ;
-        this.setArrowPosition(box, direction);
-        return box;
-    }
-
-    protected calcTooltipDirection(bbox: DirectionalBBox): Direction {
-        const directions: Direction[] = Object.keys(bbox) as Direction[];
-
-        const defaultDirection = this.direction();
-        directions.sort((a, b) => a === defaultDirection ? -1 : 1);
-        const windowRect = {
-            top: 0,
-            left: 0,
-            width: window.innerWidth,
-            height: window.innerHeight
-        };
-        for (let i = 0; i < directions.length; i++) {
-            const tooltipRect = {
-                top: bbox[directions[i]].y,
-                left: bbox[directions[i]].x,
-                width: this.tooltipWidth(),
-                height: this.tooltipHeight()
-            };
-            if (this.rectFits(tooltipRect, windowRect)) {
-                return directions[i];
-            }
-        }
-        this._logger.warning(`Tooltip doesn't fit in the window for any of the directions. Defaulting to '${defaultDirection}'`);
-        this._logger.debug(windowRect);
-        this._logger.debug({
-            top: bbox[defaultDirection].y,
-            left: bbox[defaultDirection].x,
-            width: this.tooltipWidth(),
-            height: this.tooltipHeight()
-        });
-        return defaultDirection;
-    }
-
-    protected rectFits(innerRect: Rectangle, outerRect: Rectangle): boolean {
-        return (
-            innerRect.top >= outerRect.top &&
-            innerRect.left >= outerRect.left &&
-            innerRect.width + innerRect.left <= outerRect.width + outerRect.left &&
-            innerRect.height + innerRect.top <= outerRect.height + outerRect.top
-        );
-    }
-
-    protected setArrowPosition(point: Position, direction: Direction) {
-        let top;
-        let left;
-        let visibleBorderStyle = "border-top-color";
-        this._arrowElement
-            .style("border", `${this.arrowHeight()}px solid ${this.tooltipColor()}`)
-            .style("border-top-color", "transparent")
-            .style("border-right-color", "transparent")
-            .style("border-bottom-color", "transparent")
-            .style("border-left-color", "transparent")
-            ;
-        switch (direction) {
-            case "n":
-                top = point.y + this.tooltipHeight() + (this.padding() * 2);
-                left = point.x + (this.tooltipWidth() / 2) - (this.arrowWidth() / 2) + this.padding();
-                visibleBorderStyle = "border-top-color";
-                this._arrowElement
-                    .style("border-top-width", `${this.arrowHeight()}px`)
-                    .style("border-bottom-width", "0px")
-                    .style("border-left-width", `${this.arrowWidth() / 2}px`)
-                    .style("border-right-width", `${this.arrowWidth() / 2}px`)
-                    ;
-                break;
-            case "s":
-                top = point.y - this.arrowHeight();
-                left = point.x + this.padding() + (this.tooltipWidth() / 2) - (this.arrowWidth() / 2);
-                visibleBorderStyle = "border-bottom-color";
-                this._arrowElement
-                    .style("border-top-width", "0px")
-                    .style("border-bottom-width", `${this.arrowHeight()}px`)
-                    .style("border-left-width", `${this.arrowWidth() / 2}px`)
-                    .style("border-right-width", `${this.arrowWidth() / 2}px`)
-                    ;
-                break;
-            case "e":
-                top = point.y + (this.tooltipHeight() / 2) + this.padding() - (this.arrowWidth() / 2);
-                left = point.x - this.arrowHeight();
-                visibleBorderStyle = "border-right-color";
-                this._arrowElement
-                    .style("border-top-width", `${this.arrowWidth() / 2}px`)
-                    .style("border-bottom-width", `${this.arrowWidth() / 2}px`)
-                    .style("border-left-width", "0px")
-                    .style("border-right-width", `${this.arrowHeight()}px`)
-                    ;
-                break;
-            case "w":
-                top = point.y + (this.tooltipHeight() / 2) - (this.arrowWidth() / 2) + this.padding();
-                left = point.x + this.tooltipWidth() + (this.padding() * 2);
-                visibleBorderStyle = "border-left-color";
-                this._arrowElement
-                    .style("border-top-width", `${this.arrowWidth() / 2}px`)
-                    .style("border-bottom-width", `${this.arrowWidth() / 2}px`)
-                    .style("border-left-width", `${this.arrowHeight()}px`)
-                    .style("border-right-width", "0px")
-                    ;
-                break;
-        }
-        if (typeof top !== "undefined" && typeof left !== "undefined") {
-            this._arrowElement
-                .style("top", top + "px")
-                .style("left", left + "px")
-                .style(visibleBorderStyle, this.tooltipColor())
-                .style("opacity", 1)
-                ;
-        } else {
-            this._arrowElement
-                .style("opacity", 0)
-                ;
-        }
-        return point;
-    }
-
-    protected getReferenceNode() {
-        if (!this._triggerElement) {
-            return this.element().node().parentNode.parentNode;
-        }
-        return this._triggerElement.node();
-    }
-    public _cursorLoc;
-    protected calcReferenceBBox() {
-        const node = this.getReferenceNode();
-        let { top, left, width, height } = node.getBoundingClientRect();
-        const wholeW = this.tooltipWidth();
-        const wholeH = this.tooltipHeight();
-        const halfW = wholeW / 2;
-        const halfH = wholeH / 2;
-        const arrowH = this.arrowHeight();
-        const p = this.padding();
-        const p2 = p * 2;
-
-        if(this.followCursor() && this._cursorLoc) {
-            
-            left = this._cursorLoc[0];
-            top = this._cursorLoc[1];
-            width = 1;
-            height = 1;
-        }
-        const bbox = {
-            n: {
-                x: left + (width / 2) - halfW - p,
-                y: top - wholeH - arrowH - p2
-            },
-            e: {
-                x: left + width + arrowH,
-                y: top + (height / 2) - halfH - p
-            },
-            s: {
-                x: left + (width / 2) - halfW - p,
-                y: top + height + arrowH
-            },
-            w: {
-                x: left - wholeW - arrowH - p2,
-                y: top + (height / 2) - halfH - p
-            },
-            nw: {
-                x: left - wholeW - p2,
-                y: top - wholeH - p2
-            },
-            ne: {
-                x: left + width,
-                y: top - wholeH - p2
-            },
-            se: {
-                x: left + width,
-                y: top + height
-            },
-            sw: {
-                x: left - wholeW - p2,
-                y: top + height
-            }
-        };
-        return bbox;
-    }
-
-    private _closing = false;
-    mouseout() {
-        this._closing = true;
-        this._tooltipElement.on("mouseover", () => {
-            this._closing = false;
-        });
-        this._tooltipElement.on("mouseout", () => {
-            this.mouseout();
-        });
-        setTimeout(()=>{
-            if(this._closing){
-                this.visible(false);
-            }
-        }, this.closeDelay());
-    }
-
-    visible(): boolean;
-    visible(_: boolean): this;
-    visible(_?: boolean): boolean | this {
-        if (!arguments.length) return super.visible();
-        if (this._arrowElement) {
-            this._arrowElement.style("visibility", _ ? "visible" : "hidden");
-            this._tooltipElement.style("visibility", _ ? "visible" : "hidden");
-        }
-        super.visible(_);
-        return this;
-    }
-
-    exit(domNode, element) {
-        if (this._arrowElement) {
-            this._arrowElement.remove();
-            this._tooltipElement.remove();
-        }
-        super.exit(domNode, element);
-    }
-}
-HTMLTooltip.prototype._class += " html_HTMLTooltip";
-
-export interface HTMLTooltip {
-    padding(): number;
-    padding(_: number): this;
-    direction(): Direction;
-    direction(_: Direction): this;
-    arrowHeight(): number;
-    arrowHeight(_: number): this;
-    arrowWidth(): number;
-    arrowWidth(_: number): this;
-    fontColor(): string;
-    fontColor(_: string): this;
-    tooltipColor(): string;
-    tooltipColor(_: string): this;
-    tooltipWidth(): number;
-    tooltipWidth(_: number): this;
-    tooltipWidth_default(_: number);
-    tooltipHeight(): number;
-    tooltipHeight(_: number): this;
-    tooltipHeight_default(_: number);
-    followCursor(): boolean;
-    followCursor(_: boolean): this;
-    enablePointerEvents(): boolean;
-    enablePointerEvents(_: boolean): this;
-    closeDelay(): number;
-    closeDelay(_: number): this;
-    fitContent(): boolean;
-    fitContent(_: boolean): this;
-    
-}
-
-HTMLTooltip.prototype.publish("fitContent", false, "boolean", "If true, tooltip will grow to fit its html content");
-HTMLTooltip.prototype.publish("followCursor", false, "boolean", "If true, tooltip will display relative to cursor location");
-HTMLTooltip.prototype.publish("closeDelay", 400, "number", "Number of milliseconds to wait before closing tooltip (cancelled on tooltip mouseover event)");
-HTMLTooltip.prototype.publish("direction", "n", "set", "Direction in which to display the tooltip", ["n", "s", "e", "w", "ne", "nw", "se", "sw"]);
-HTMLTooltip.prototype.publish("padding", 8, "number", "Padding (pixels)");
-HTMLTooltip.prototype.publish("arrowWidth", 16, "number", "Width (or height depending on direction) of the tooltip arrow (pixels)");
-HTMLTooltip.prototype.publish("arrowHeight", 8, "number", "Height (or width depending on direction) of the tooltip arrow (pixels)");
-HTMLTooltip.prototype.publish("fontColor", "#FFF", "html-color", "The default font color for text in the tooltip");
-HTMLTooltip.prototype.publish("tooltipColor", "#000000EE", "html-color", "Background color of the tooltip");
-HTMLTooltip.prototype.publish("tooltipWidth", 200, "number", "Width of the tooltip (not including arrow) (pixels)");
-HTMLTooltip.prototype.publish("tooltipHeight", 200, "number", "Height of the tooltip (not including arrow) (pixels)");
-HTMLTooltip.prototype.publish("enablePointerEvents", false, "boolean", "If true, the 'pointer-events: all' style will be used");
+import { HTMLWidget } from "@hpcc-js/common";
+import { scopedLogger, ScopedLogging } from "@hpcc-js/util";
+import { select as d3Select } from "d3-selection";
+
+type Direction = "n" | "s" | "e" | "w" | "ne" | "nw" | "se" | "sw";
+type Position = { x: number, y: number };
+type DirectionalBBox = { [key in Direction]: Position; };
+
+type Rectangle = { top: number, left: number, width: number, height: number };
+export class HTMLTooltip extends HTMLWidget {
+
+    public _triggerElement;
+    public _contentNode;
+    protected _prevContentNode;
+
+    protected _tooltipElement;
+    protected _arrowElement;
+    protected _tooltipHTMLCallback = (data?) => "<b>_tooltipHTMLCallback is undefined</b>";
+    protected _logger: ScopedLogging = scopedLogger("html/HTMLTooltip");
+    constructor() {
+        super();
+        this.visible(false);
+    }
+
+    tooltipHTML(_: (data?) => string): this {
+        this._tooltipHTMLCallback = _;
+        return this;
+    }
+
+    tooltipContent(_): this {
+        if (!arguments.length) return this._contentNode;
+        this._contentNode = _;
+        return this;
+    }
+
+    triggerElement(_): this {
+        this._triggerElement = _;
+        return this;
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        const body = d3Select("body");
+        this._tooltipElement = body.append("div")
+            .attr("class", "tooltip-div")
+            .style("z-index", "2147483638")
+            .style("position", "fixed")
+            ;
+        this._arrowElement = body.append("div")
+            .attr("class", "arrow-div")
+            .style("z-index", "2147483638")
+            .style("position", "fixed")
+            ;
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+
+        if(this._contentNode !== this._prevContentNode){
+            const node = this._tooltipElement.node();
+            [...node.querySelectorAll("*")]
+            .map(n=>n.__data__)
+            .filter(n=>n)
+            .forEach(w=>{
+                if(typeof w.target === "function"){
+                    w.target(null);
+                }
+                if(typeof w.exit === "function"){
+                    w.exit();
+                }
+            });
+            node.innerHTML = "";
+            node.appendChild(this._contentNode);
+            this._prevContentNode = this._contentNode;
+        }
+
+        if (this._contentNode) {
+            this.onShowContent(this._contentNode);
+        } else {
+            this._tooltipElement
+                .html(() => {
+                    return this._tooltipHTMLCallback(this.data());
+                });
+        }
+        if(this.fitContent()){
+            this._tooltipElement
+                .style("width", "auto")
+                .style("height", "auto")
+                .style("padding", "0px")
+                .style("box-sizing", "content-box")
+                ;
+            const rect = this._tooltipElement.node().getBoundingClientRect();
+            this.tooltipWidth_default(rect.width);
+            this.tooltipHeight_default(rect.height);
+        }
+        this._closing = false;
+        this._tooltipElement
+            .style("background-color", this.tooltipColor())
+            .style("color", this.fontColor())
+            .style("width", this.tooltipWidth() + "px")
+            .style("height", this.tooltipHeight() + "px")
+            .style("opacity", 1)
+            .style("padding", this.padding() + "px")
+            .style("pointer-events", this.enablePointerEvents() ? "all" : "none")
+            .style("box-sizing", "content-box")
+            ;
+        this._arrowElement
+            .style("opacity", 1)
+            .style("pointer-events", "none")
+            ;
+        this.updateTooltipPosition();
+    }
+
+    onShowContent(node) {
+        
+    }
+
+    protected updateTooltipPosition(): Position {
+        const bbox = this.calcReferenceBBox();
+        const direction = this.calcTooltipDirection(bbox);
+        const box = bbox[direction];
+        this._tooltipElement
+            .style("top", box.y + "px")
+            .style("left", box.x + "px")
+            ;
+        this.setArrowPosition(box, direction);
+        return box;
+    }
+
+    protected calcTooltipDirection(bbox: DirectionalBBox): Direction {
+        const directions: Direction[] = Object.keys(bbox) as Direction[];
+
+        const defaultDirection = this.direction();
+        directions.sort((a, b) => a === defaultDirection ? -1 : 1);
+        const windowRect = {
+            top: 0,
+            left: 0,
+            width: window.innerWidth,
+            height: window.innerHeight
+        };
+        for (let i = 0; i < directions.length; i++) {
+            const tooltipRect = {
+                top: bbox[directions[i]].y,
+                left: bbox[directions[i]].x,
+                width: this.tooltipWidth(),
+                height: this.tooltipHeight()
+            };
+            if (this.rectFits(tooltipRect, windowRect)) {
+                return directions[i];
+            }
+        }
+        this._logger.warning(`Tooltip doesn't fit in the window for any of the directions. Defaulting to '${defaultDirection}'`);
+        this._logger.debug(windowRect);
+        this._logger.debug({
+            top: bbox[defaultDirection].y,
+            left: bbox[defaultDirection].x,
+            width: this.tooltipWidth(),
+            height: this.tooltipHeight()
+        });
+        return defaultDirection;
+    }
+
+    protected rectFits(innerRect: Rectangle, outerRect: Rectangle): boolean {
+        return (
+            innerRect.top >= outerRect.top &&
+            innerRect.left >= outerRect.left &&
+            innerRect.width + innerRect.left <= outerRect.width + outerRect.left &&
+            innerRect.height + innerRect.top <= outerRect.height + outerRect.top
+        );
+    }
+
+    protected setArrowPosition(point: Position, direction: Direction) {
+        let top;
+        let left;
+        let visibleBorderStyle = "border-top-color";
+        this._arrowElement
+            .style("border", `${this.arrowHeight()}px solid ${this.tooltipColor()}`)
+            .style("border-top-color", "transparent")
+            .style("border-right-color", "transparent")
+            .style("border-bottom-color", "transparent")
+            .style("border-left-color", "transparent")
+            ;
+        switch (direction) {
+            case "n":
+                top = point.y + this.tooltipHeight() + (this.padding() * 2);
+                left = point.x + (this.tooltipWidth() / 2) - (this.arrowWidth() / 2) + this.padding();
+                visibleBorderStyle = "border-top-color";
+                this._arrowElement
+                    .style("border-top-width", `${this.arrowHeight()}px`)
+                    .style("border-bottom-width", "0px")
+                    .style("border-left-width", `${this.arrowWidth() / 2}px`)
+                    .style("border-right-width", `${this.arrowWidth() / 2}px`)
+                    ;
+                break;
+            case "s":
+                top = point.y - this.arrowHeight();
+                left = point.x + this.padding() + (this.tooltipWidth() / 2) - (this.arrowWidth() / 2);
+                visibleBorderStyle = "border-bottom-color";
+                this._arrowElement
+                    .style("border-top-width", "0px")
+                    .style("border-bottom-width", `${this.arrowHeight()}px`)
+                    .style("border-left-width", `${this.arrowWidth() / 2}px`)
+                    .style("border-right-width", `${this.arrowWidth() / 2}px`)
+                    ;
+                break;
+            case "e":
+                top = point.y + (this.tooltipHeight() / 2) + this.padding() - (this.arrowWidth() / 2);
+                left = point.x - this.arrowHeight();
+                visibleBorderStyle = "border-right-color";
+                this._arrowElement
+                    .style("border-top-width", `${this.arrowWidth() / 2}px`)
+                    .style("border-bottom-width", `${this.arrowWidth() / 2}px`)
+                    .style("border-left-width", "0px")
+                    .style("border-right-width", `${this.arrowHeight()}px`)
+                    ;
+                break;
+            case "w":
+                top = point.y + (this.tooltipHeight() / 2) - (this.arrowWidth() / 2) + this.padding();
+                left = point.x + this.tooltipWidth() + (this.padding() * 2);
+                visibleBorderStyle = "border-left-color";
+                this._arrowElement
+                    .style("border-top-width", `${this.arrowWidth() / 2}px`)
+                    .style("border-bottom-width", `${this.arrowWidth() / 2}px`)
+                    .style("border-left-width", `${this.arrowHeight()}px`)
+                    .style("border-right-width", "0px")
+                    ;
+                break;
+        }
+        if (typeof top !== "undefined" && typeof left !== "undefined") {
+            this._arrowElement
+                .style("top", top + "px")
+                .style("left", left + "px")
+                .style(visibleBorderStyle, this.tooltipColor())
+                .style("opacity", 1)
+                ;
+        } else {
+            this._arrowElement
+                .style("opacity", 0)
+                ;
+        }
+        return point;
+    }
+
+    protected getReferenceNode() {
+        if (!this._triggerElement) {
+            return this.element().node().parentNode.parentNode;
+        }
+        return this._triggerElement.node();
+    }
+    public _cursorLoc;
+    protected calcReferenceBBox() {
+        const node = this.getReferenceNode();
+        let { top, left, width, height } = node.getBoundingClientRect();
+        const wholeW = this.tooltipWidth();
+        const wholeH = this.tooltipHeight();
+        const halfW = wholeW / 2;
+        const halfH = wholeH / 2;
+        const arrowH = this.arrowHeight();
+        const p = this.padding();
+        const p2 = p * 2;
+
+        if(this.followCursor() && this._cursorLoc) {
+            
+            left = this._cursorLoc[0];
+            top = this._cursorLoc[1];
+            width = 1;
+            height = 1;
+        }
+        const bbox = {
+            n: {
+                x: left + (width / 2) - halfW - p,
+                y: top - wholeH - arrowH - p2
+            },
+            e: {
+                x: left + width + arrowH,
+                y: top + (height / 2) - halfH - p
+            },
+            s: {
+                x: left + (width / 2) - halfW - p,
+                y: top + height + arrowH
+            },
+            w: {
+                x: left - wholeW - arrowH - p2,
+                y: top + (height / 2) - halfH - p
+            },
+            nw: {
+                x: left - wholeW - p2,
+                y: top - wholeH - p2
+            },
+            ne: {
+                x: left + width,
+                y: top - wholeH - p2
+            },
+            se: {
+                x: left + width,
+                y: top + height
+            },
+            sw: {
+                x: left - wholeW - p2,
+                y: top + height
+            }
+        };
+        return bbox;
+    }
+
+    private _closing = false;
+    mouseout() {
+        this._closing = true;
+        this._tooltipElement.on("mouseover", () => {
+            this._closing = false;
+        });
+        this._tooltipElement.on("mouseout", () => {
+            this.mouseout();
+        });
+        setTimeout(()=>{
+            if(this._closing){
+                this.visible(false);
+            }
+        }, this.closeDelay());
+    }
+
+    visible(): boolean;
+    visible(_: boolean): this;
+    visible(_?: boolean): boolean | this {
+        if (!arguments.length) return super.visible();
+        if (this._arrowElement) {
+            this._arrowElement.style("visibility", _ ? "visible" : "hidden");
+            this._tooltipElement.style("visibility", _ ? "visible" : "hidden");
+        }
+        super.visible(_);
+        return this;
+    }
+
+    exit(domNode, element) {
+        if (this._arrowElement) {
+            this._arrowElement.remove();
+            this._tooltipElement.remove();
+        }
+        super.exit(domNode, element);
+    }
+}
+HTMLTooltip.prototype._class += " html_HTMLTooltip";
+
+export interface HTMLTooltip {
+    padding(): number;
+    padding(_: number): this;
+    direction(): Direction;
+    direction(_: Direction): this;
+    arrowHeight(): number;
+    arrowHeight(_: number): this;
+    arrowWidth(): number;
+    arrowWidth(_: number): this;
+    fontColor(): string;
+    fontColor(_: string): this;
+    tooltipColor(): string;
+    tooltipColor(_: string): this;
+    tooltipWidth(): number;
+    tooltipWidth(_: number): this;
+    tooltipWidth_default(_: number);
+    tooltipHeight(): number;
+    tooltipHeight(_: number): this;
+    tooltipHeight_default(_: number);
+    followCursor(): boolean;
+    followCursor(_: boolean): this;
+    enablePointerEvents(): boolean;
+    enablePointerEvents(_: boolean): this;
+    closeDelay(): number;
+    closeDelay(_: number): this;
+    fitContent(): boolean;
+    fitContent(_: boolean): this;
+    
+}
+
+HTMLTooltip.prototype.publish("fitContent", false, "boolean", "If true, tooltip will grow to fit its html content");
+HTMLTooltip.prototype.publish("followCursor", false, "boolean", "If true, tooltip will display relative to cursor location");
+HTMLTooltip.prototype.publish("closeDelay", 400, "number", "Number of milliseconds to wait before closing tooltip (cancelled on tooltip mouseover event)");
+HTMLTooltip.prototype.publish("direction", "n", "set", "Direction in which to display the tooltip", ["n", "s", "e", "w", "ne", "nw", "se", "sw"]);
+HTMLTooltip.prototype.publish("padding", 8, "number", "Padding (pixels)");
+HTMLTooltip.prototype.publish("arrowWidth", 16, "number", "Width (or height depending on direction) of the tooltip arrow (pixels)");
+HTMLTooltip.prototype.publish("arrowHeight", 8, "number", "Height (or width depending on direction) of the tooltip arrow (pixels)");
+HTMLTooltip.prototype.publish("fontColor", "#FFF", "html-color", "The default font color for text in the tooltip");
+HTMLTooltip.prototype.publish("tooltipColor", "#000000EE", "html-color", "Background color of the tooltip");
+HTMLTooltip.prototype.publish("tooltipWidth", 200, "number", "Width of the tooltip (not including arrow) (pixels)");
+HTMLTooltip.prototype.publish("tooltipHeight", 200, "number", "Height of the tooltip (not including arrow) (pixels)");
+HTMLTooltip.prototype.publish("enablePointerEvents", false, "boolean", "If true, the 'pointer-events: all' style will be used");