Create Tooltip-Objects in your Update-Method by using the constructor.
Create a tooltip service wrapper and your hostService:
private tooltipServiceWrapper: ITooltipServiceWrapper;
private host: IVisualHost;
private g: d3.Selection<SVGElement>;
Fill your constructor and generate tooltips for each datapoint in your update-method:
constructor(options: VisualConstructorOptions) {
this.host = options.host;
this.tooltipServiceWrapper = createTooltipServiceWrapper(this.host.tooltipService, options.element);
this.g = this.svg.append('g');
...
}
public update(options: VisualUpdateOptions) {
// SVG-Container
this.g
.attr({height: gHeight, width: gWidth})
.attr('transform','translate(' + this.margin.left + ',' + this.margin.top + ')');
this.tooltipServiceWrapper.addTooltip(this.g.selectAll('.bar'),
(tooltipEvent: TooltipEventArgs<number>) => this.getTooltipData(tooltipEvent.data),
(tooltipEvent: TooltipEventArgs<number>) => null
);
}Also also will need a function which is called for each datapoint:
private getTooltipData(value: any): VisualTooltipDataItem[] {
return [{
displayName: "Category: " + value.category,
value: "Values: " + value.value.toString(),
color: value.color,
header: "Im a title"
}];
}
Im not an expert but i think thats all you need.
I got the code from here, you may want to check it out: click me
