topic Re: Tooltip positioning in Developer

Tooltip positioning

ysapiyev — Wed, 28 Mar 2018 07:45:54 GMT

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

Re: Tooltip positioning

az2451 — Wed, 28 Mar 2018 13:18:20 GMT

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

Re: Tooltip positioning

ysapiyev — Wed, 28 Mar 2018 16:51:36 GMT

@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

Re: Tooltip positioning

az2451 — Thu, 29 Mar 2018 08:15:08 GMT

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