Get certified for free when you join Fabric Data Days 2026 and dive into Fabric, Power BI, SQL, AI, and other essential data skills.
Join nowJuly 28 - August 9 | Final Round of the Power BI Dataviz World Championships. This is your chance. Learn more
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!
Join us in Barcelona for FabCon and SQLCon, the Fabric, Power BI, SQL, and AI community event. Save €200 with code FABCMTY200.
If you love stickers, then you will definitely want to check out our community sticker challenge, Barcelona edition!
Check out the July 2026 Power BI update to learn about new features.