Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
6 years ago

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. ...
dm-p's avatar
dm-p
Icon for Super User rankSuper User
6 years ago

Hi Anonymous,

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

 

  • Anonymous's avatar
    Anonymous
    Not applicable
    6 years ago

    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.