Forum Discussion
Solved
Tooltip positioning
Hi everyone, I have map visual with tooltips made as foreign objects. I have a problem with them, some part of tooltip can be outside of visual and I can see only part of it. Is there generic pos...
To workaround the issue we would recommend to use Tooltip Service instead.
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
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