Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Enhance your career with this limited time 50% discount on Fabric and Power BI exams. Ends August 31st. Request your voucher.

Reply
emma_s
Helper I
Helper I

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

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"
]
},

2 REPLIES 2
dm-p
Super User
Super User

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

 





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




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. 

Helpful resources

Announcements
July 2025 community update carousel

Fabric Community Update - July 2025

Find out what's new and trending in the Fabric community.

July PBI25 Carousel

Power BI Monthly Update - July 2025

Check out the July 2025 Power BI update to learn about new features.

Join our Fabric User Panel

Join our Fabric User Panel

This is your chance to engage directly with the engineering team behind Fabric and Power BI. Share your experiences and shape the future.

Top Solution Authors