Tooltip positioning

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

Hi ysapiyev

Please post a screenshot to understand the issue better.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

[email protected]