Custom visual tooltips: allowing user to add fields to the tooltip

[emma_s]

Hello. I want to show multiple fields of data on a tooltip in a custom visual. Currently I am showing a title, category and value. I want to show the value as a percent as well as the actual number.

At this point I don't mind whether I hardcode these datapoints or let the user add them via the fields pane. Obviously the latter is the cleaner solution. This is the method I am trying currently.

I have made the tooltips well show in the fields pane by adding the following to dataRoles within the capabilities file, but when I drag/drop a field into this well, no additional data is shown on the tooltip itself:

{
"displayName": "Tooltips",
"name": "Tooltips",
"kind": "Measure"
}

In visual.ts, my code is unchanged. It has the getTooltipData function and addTooltip method etc which makes the existing tooltip work. Do i need to change visual.ts to make the tooltip show the extra field?

PS. I don't think this is relevant, but I have also added this section below the objects {} section in capabilities, and now a tooltips section appears in the formatting pane. This seems to let me create a report tooltip, which I don't want. 

"tooltips": {
"supportedTypes": {
"default": true,
"canvas": true
},
"roles": [
"Tooltips"
]
},

[dm-p]

Hi @emma_s,

For this functionality, you will need to manage the additional fields and values provided by the user in this dataRole and manually push them into your VisualTooltipDataItem array when you render your tooltip.

If you are already pushing the raw measure value into your tooltip, the code you are using to do this can be modified accordingly to point to the new values.

I do something in one of my visuals that calculates a number of distribution stats internally, and I provide the ability for users to configure which ones get displayed. Here's the method that I use to build the tooltips - it might provide you with some direction as to how you may solve your particular challenge.

Good luck!

Daniel

[emma_s]

Thanks @dm-p. Your post pointed me in the right direction. 

    private getTooltipData(value: any): VisualTooltipDataItem[] {
        let language = getLocalizedString(this.locale, "LanguageKey");
        return [{
            displayName: value.category,
            value: value.value.toString(),
            color: value.color,
            header: language && "displayed language " + language
        }];
    }

For anyone else trying to get multi-line tooltips in power bi custom visuals, just notice the code above says: return [{}]. In other words, return an array of objects. In this case it is returning a single object. However you can create an array of objects, and return that. Only the first object in the array should contain a header.