Join us at FabCon Atlanta from March 16 - 20, 2026, for the ultimate Fabric, Power BI, AI and SQL community-led event. Save $200 with code FABCOMM.
Register now!Vote for your favorite vizzies from the Power BI Dataviz World Championship submissions. Vote now!
Dear PBI Community,
at the moment, we are facing a problem with the PBI Tooltips.
We followed these instructions, but cant get them to work: https://docs.microsoft.com/en-us/power-bi/developer/visuals/utils-tooltip
Am I wrong, or are there some inconsistencies with the example code?
Here is our not working try on the instruction:
import "./../style/visual.less";
import powerbiVisualsApi from "powerbi-visuals-api";
import "regenerator-runtime/runtime";
import powerbi = powerbiVisualsApi;
type Selection<T1, T2 = T1> = d3.Selection<any, T1, any, T2>;
import IVisual = powerbi.extensibility.IVisual;
import IVisualHost = powerbi.extensibility.visual.IVisualHost;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import {createTooltipServiceWrapper, ITooltipServiceWrapper, TooltipEventArgs, TooltipEnabledDataPoint } from "powerbi-visuals-utils-tooltiputils";
import * as d3 from "d3";
export class Visual implements IVisual {
private tooltipServiceWrapper: ITooltipServiceWrapper;
private host: IVisualHost;
private svg: Selection<any>;
constructor(options: VisualConstructorOptions) {
this.host = options.host;
this.svg = d3.select(options.element)
.append('svg');
}
public update(options: VisualUpdateOptions) {
this.svg.attr("width", options.viewport.width);
this.svg.attr("height", options.viewport.height);
this.svg
.append("rect")
.attr("fill", "green")
.attr("width", "150")
.attr("height", "150")
.attr("x", 100)
.attr("y", 100)
.classed("visual", true)
.data([{
tooltipInfo: [{
displayName: "Power BI",
value: 2016
}]
}]);
this.tooltipServiceWrapper = createTooltipServiceWrapper(this.host.tooltipService, this.svg.node() as Element); // tooltipService is from the IVisualHost.
this.tooltipServiceWrapper.addTooltip(
this.svg,
(tooltipEvent: TooltipEventArgs<TooltipEnabledDataPoint>) => {
return tooltipEvent.data.tooltipInfo;
});
}
}
Where is the problem with this code?
Thanks in advance!
Vote for your favorite vizzies from the Power BI World Championship submissions!
If you love stickers, then you will definitely want to check out our Community Sticker Challenge!
Check out the January 2026 Power BI update to learn about new features.