Hello,
I have been working on a custom visual and would like to add a tooltip to it, although I can not get the option to appear in the "fields" area, to add data into it. Any help would be appreciated.
capabilities.json
{
"objects": {},
"dataRoles": [
{
"displayName": "CCFV",
"name": "category1",
"kind": "Grouping"
}
],
"tooltips": {
"supportedTypes": {
"default": true,
"canvas": true
},
"roles": [
"tooltips"
]},
"dataViewMappings": [
{
"conditions": [
{
"category1": {
"max": 1
}
}
],
"table": {
"rows": {
"for": {
"in": "category1"
}
}
}
}
]
}
Image of the editor.
visual.ts (some of it)
"use strict";
import "core-js/stable";
import "../style/visual.less";
import powerbi from "powerbi-visuals-api";
import IVisual = powerbi.extensibility.IVisual;
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import VisualObjectInstanceEnumeration = powerbi.VisualObjectInstanceEnumeration;
import IVisualHost = powerbi.extensibility.visual.IVisualHost;
import DataView = powerbi.DataView;
import VisualTooltipDataItem = powerbi.extensibility.VisualTooltipDataItem;
import * as d3 from "d3";
import {
createTooltipServiceWrapper,
ITooltipEventArgs,
ITooltipServiceWrapper,
} from "./tooltipServiceWrapper";
type Selection<T extends d3.BaseType> = d3.Selection<T, any, any, any>;
export class Visual implements IVisual {
private element: HTMLElement;
private isLandingPageOn: boolean;
private LandingPageRemoved: boolean;
private host: IVisualHost;
private svg: Selection<SVGElement>;
private container: Selection<SVGElement>;
private circle: Selection<SVGElement>;
private textValue: Selection<SVGElement>;
private textLabel: Selection<SVGElement>;
// Declare an array list for the line objects
private lineOffset: Selection<SVGElement>;
private arr = new Array();
private arrDots = new Array();
// Declare as array of integers to hold the segments of the circle
private arrSegments = new Array();
private arrOffsetSegments = new Array();
private singleSegment: number;
private categorys: number = 17;
private CenterarrayOffset_ = new Array();
private LandingPage: Selection<any>;
virificationArray: string[];
private tooltipServiceWrapper: ITooltipServiceWrapper;
constructor(options: VisualConstructorOptions) {
this.element = options.element;
this.svg = d3.select(options.element)
.append('svg')
.classed('circleCard', true);
this.host = options.host;
this.container = this.svg.append("g")
.classed('container', true);
this.tooltipServiceWrapper = createTooltipServiceWrapper(this.host.tooltipService, options.element);
this.tooltipServiceWrapper.addTooltip(this.container.selectAll('.circleCard'),
(tooltipEvent: ITooltipEventArgs<number>) => Visual.getTooltipData(tooltipEvent.data),
(tooltipEvent: ITooltipEventArgs<number>) => tooltipEvent.data[0]);
}
Hi @BrentonC,
In your capabilities, you specified a role named "tooltips", but haven't supplied a dataRole for it, so update the dataRoles section of your capabilities as follows:
{
...
"dataRoles": [
{
"displayName": "CCFV",
"name": "category1",
"kind": "Grouping"
},
{
"displayName": "Tooltips",
"name": "tooltips",
"kind": "Measure"
}
],
...
}(the kind could be GroupingOrMeasure also, as you're using the table data view mapping; I've just gone with Measure for now)
This will then show up a place to add measure fields:
The sample bar chart has a very similar setup to this.
However if you want to make use of the measure(s) you pass in here, you'll need to update your dataViewMapping, as it will not appear in there and as such will not be accessible to the visual (note that only Dose is present):
I've modified this as follows:
{
...
"dataViewMappings": [
{
"conditions": [
{
"category1": {
"max": 1
}
}
],
"table": {
"rows": {
"select": [
{
"for": {
"in": "category1"
}
},
{
"for": {
"in": "tooltips"
}
}
]
}
}
}
]
...
}Now, this will be accessible to the visual's data view, e.g.:
You'll then need to update your view model to include the tooltip data when you map the data view, and ensure that your getTooltipData function iterates through any additional measures you've added so that it knows what to display when the tooltip is rendered - unfortunately you haven't supplied these parts of your code for me to check, but it should be fairly straightforward for you to do if you're already mapping your category1 role into the visual's view model 🙂
Good luck!
Daniel
Hi @BrentonC,
In your capabilities, you specified a role named "tooltips", but haven't supplied a dataRole for it, so update the dataRoles section of your capabilities as follows:
{
...
"dataRoles": [
{
"displayName": "CCFV",
"name": "category1",
"kind": "Grouping"
},
{
"displayName": "Tooltips",
"name": "tooltips",
"kind": "Measure"
}
],
...
}(the kind could be GroupingOrMeasure also, as you're using the table data view mapping; I've just gone with Measure for now)
This will then show up a place to add measure fields:
The sample bar chart has a very similar setup to this.
However if you want to make use of the measure(s) you pass in here, you'll need to update your dataViewMapping, as it will not appear in there and as such will not be accessible to the visual (note that only Dose is present):
I've modified this as follows:
{
...
"dataViewMappings": [
{
"conditions": [
{
"category1": {
"max": 1
}
}
],
"table": {
"rows": {
"select": [
{
"for": {
"in": "category1"
}
},
{
"for": {
"in": "tooltips"
}
}
]
}
}
}
]
...
}Now, this will be accessible to the visual's data view, e.g.:
You'll then need to update your view model to include the tooltip data when you map the data view, and ensure that your getTooltipData function iterates through any additional measures you've added so that it knows what to display when the tooltip is rendered - unfortunately you haven't supplied these parts of your code for me to check, but it should be fairly straightforward for you to do if you're already mapping your category1 role into the visual's view model 🙂
Good luck!
Daniel
Helpful resources
Join us at the Microsoft Fabric Community Conference
March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount!
Power BI Monthly Update - February 2025
Check out the February 2025 Power BI update to learn about new features.
Fabric Community Update - March 2025
Find out what's new and trending in the Fabric community.
