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');
}
}
}