Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

Reply
ysapiyev
Responsive Resident
Responsive Resident

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 positioning, so it will adjust if it plots outside of visual?

 

Regards,

Yerkhan

1 ACCEPTED SOLUTION
v-viig
Community Champion
Community Champion

To workaround the issue we would recommend to use Tooltip Service instead.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

View solution in original post

14 REPLIES 14
az2451
Resolver I
Resolver I

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

 

ysapiyev
Responsive Resident
Responsive Resident

@az2451,

 

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.

 

 

v-viig
Community Champion
Community Champion

Hi @ysapiyev

 

Please post a screenshot to understand the issue better.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

ysapiyev
Responsive Resident
Responsive Resident

@v-viig,

 

I've attached it below:

Безымянный.png

v-viig
Community Champion
Community Champion

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

pbicvsupport@microsoft.com

 

 

ysapiyev
Responsive Resident
Responsive Resident

@v-viig,

 

No, I'm using foreign object, since I wasn't able to implement regular tooltip service.

 

Regards,

Yerkhan

v-viig
Community Champion
Community Champion

To workaround the issue we would recommend to use Tooltip Service instead.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

ysapiyev
Responsive Resident
Responsive Resident

@v-viig,

 

Thanks. Will do that.

 

Regards,

Yerkhan

az2451
Resolver I
Resolver I

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

ysapiyev
Responsive Resident
Responsive Resident

@az2451,

 

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

 

 

 

ysapiyev
Responsive Resident
Responsive Resident

@az2451,

 

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?

ysapiyev
Responsive Resident
Responsive Resident

@az2451,

 

I can send it to you by email.

Helpful resources

Announcements
Sept PBI Carousel

Power BI Monthly Update - September 2024

Check out the September 2024 Power BI update to learn about new features.

September Hackathon Carousel

Microsoft Fabric & AI Learning Hackathon

Learn from experts, get hands-on experience, and win awesome prizes.

Sept NL Carousel

Fabric Community Update - September 2024

Find out what's new and trending in the Fabric Community.

Top Solution Authors