public render()

in src/UXClient/Components/Tooltip/Tooltip.ts [58:116]


    public render(theme) {
        let self = this;
        let tooltip = this.renderTarget.selectAll('.tsi-tooltip').filter(function () {
            return (this.parentNode === self.renderTarget.node());
        }).data([theme]);

        this.tooltipDiv = tooltip.enter().append('div')
            .attr('class', 'tsi-tooltip')
            .merge(tooltip)
            .each(function (d) {
                d3.select(this).selectAll("*").remove();
                self.tooltipDivInner = d3.select(this).append('div')
                    .attr('class', 'tsi-tooltipInner');
            });
        tooltip.exit().remove();
        super.themify(this.tooltipDiv, theme);
        
        // Element width is an optional parameter which ensures that the tooltip doesn't interfere with the element
        // when positioning to the right
        this.draw = (d: any, chartComponentData: ChartComponentData, xPos, yPos, chartMargins, addText, elementWidth: number = null, xOffset = 20, yOffset = 20, borderColor: string = null, isFromMarker: boolean = false) => {
            this.tooltipDiv.style("display", "block"); 
            this.tooltipDivInner.text(null);

            this.borderColor = borderColor;

            var leftOffset = isFromMarker ? 0 : this.getLeftOffset(chartMargins);
            var topOffset = this.getTopOffset(chartMargins);
            addText(this.tooltipDivInner);

            this.tooltipDiv.style("left", Math.round(xPos + leftOffset) + "px")
                .style("top", Math.round(yPos) + topOffset + "px");

            var tooltipWidth = this.tooltipDiv.node().getBoundingClientRect().width;
            var tooltipHeight = this.tooltipDiv.node().getBoundingClientRect().height;
            var translateX = this.isRightOffset(tooltipWidth, xPos, chartMargins.left) ? xOffset : 
                (-Math.round(tooltipWidth) - xOffset - (elementWidth !== null ? elementWidth : 0));             
            translateX = Math.max(0 - xPos, translateX);

            let translateY =  0;

            if(this.isTopOffset(tooltipHeight, yPos, chartMargins)){ // Place tooltip @ bottom of point
                translateY = yOffset;
            } else{
                if(!isFromMarker && Math.round(yPos) - yOffset + topOffset - Math.round(tooltipHeight) <= 0){ // Upper bound check to keep tooltip within chart
                    translateY = -(Math.round(yPos) + topOffset);
                }else{
                    translateY = (-Math.round(tooltipHeight) - yOffset); // Place tooltip @ top of point
                }
            }  

            this.tooltipDiv.style("transform", "translate(" + translateX + "px," + translateY + "px)");
            if (this.borderColor) {
                this.tooltipDivInner.style('border-left-color', this.borderColor)
                    .style('border-left-width', '5px');
            } else {
                this.tooltipDivInner.style('border-left-width', '0');
            }
        }
    }