cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
ysapiyev Member
Member

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

Accepted Solutions
Moderator v-viig
Moderator

Re: Tooltip positioning

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 Member
Member

Re: Tooltip positioning

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 Member
Member

Re: Tooltip positioning

@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

 

az2451 Member
Member

Re: 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

 

 

 

ysapiyev Member
Member

Re: Tooltip positioning

@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

az2451 Member
Member

Re: Tooltip positioning

You may want to upload your full project directory?

ysapiyev Member
Member

Re: Tooltip positioning

@az2451,

 

I can send it to you by email.

az2451 Member
Member

Re: Tooltip positioning

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 Member
Member

Re: Tooltip positioning

@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.

 

 

Moderator v-viig
Moderator

Re: Tooltip positioning

Hi @ysapiyev

 

Please post a screenshot to understand the issue better.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Helpful resources

Announcements
New Ranks and Rank Icons in 2020

New Ranks and Rank Icons in 2020

Read the announcement for more information!

New Kudos Given Badges Coming

New Kudos Given Badges Coming

We're rolling out new Kudos Given badges. Find out how many Kudos you've given.

November 2019 Community Highlights

November 2019 Community Highlights

Get an overview of the events and great community content from November.

Power Platform World Tour

Power Platform World Tour

Find out where you can attend!

Top Solution Authors
Top Kudoed Authors (Last 30 Days)