Forum Discussion
Tooltip positioning
To workaround the issue we would recommend to use Tooltip Service instead.
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Do you have some screenshots or some code for us?
What packages are you using? With what are you working with?
If you are working with Custom Visuals, you can create your own tooltips and position them however you like by using JS and CSS
I'm using custom visual and here's my code for my visual:
var tooltip = g.append("foreignObject")
.classed("tooltip", true)
.style("opacity", 0);
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html('<div><table>'
+ '<tr colspan=2><td style="color:#eee; font-size:11px" align="center">'+ dpt.group +'</td></tr>'
+ '<tr><td style="color:#aaa" align="left">'+leg10+" : "+ '</td>'+'<td style="color:#fff">'+ dpt.count[9]+'</td></tr> '
+ '</table></div>')
.attr("x", map.latLngToLayerPoint(dpt.latlng as any).x +50 )
.attr("y", map.latLngToLayerPoint(dpt.latlng as any).y -120 );I couldn't make it to be generic, so it will not crop.
Regards,
Yerkhan
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