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!The Power BI Data Visualization World Championships is back! Get ahead of the game and start preparing now! 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!
The Power BI Data Visualization World Championships is back! Get ahead of the game and start preparing now!
| User | Count |
|---|---|
| 7 | |
| 5 | |
| 2 | |
| 1 | |
| 1 |