March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount! Early bird discount ends December 31.
Register NowBe one of the first to start using Fabric Databases. View on-demand sessions with database experts and the Microsoft product team to learn just how easy it is to get started. Watch now
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 positioning, so it will adjust if it plots outside of visual?
Regards,
Yerkhan
Solved! Go to Solution.
To workaround the issue we would recommend to use Tooltip Service instead.
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
I dont post emails in a forum, sorry for that.
But you are saying that the tooltips are working fine but some are going over the sandbox.
So that means that some tooltips near the edges are shown only a part of it?
To prevent that you can use margins or if possible use a z-index to show the tooltips always on the front layer
No problem.
Yes, you're right, only part of it is shown. I'm not using regular tooltips, I have html dev, which I use as tooltip.
Hi @ysapiyev
Please post a screenshot to understand the issue better.
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Looks like the tooltip is inside of iframe element.
I'm wondering if you use TooltipService to show a tooltip?
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
No, I'm using foreign object, since I wasn't able to implement regular tooltip service.
Regards,
Yerkhan
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
I'm familiar with this method, however, in map visual I wasn't able to implement it. Therefore, foreign object was used.
Regards,
Yerkhan
You may want to upload your full project directory?
March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount!