Forum Discussion
Custom Visual Tooltip to show the Tooltip page
Hi I am trying to add a page as tooltip for my custom visual. My tooltip code in visual.ts is
//constructor
this.MainValue
= this.container
.append('text')
.classed('textValue', true);
//update
this.TooltipServiceWrapper.addTooltip(
this.MainValue,
(eventArgs: TooltipEventArgs<number>) => viewModel.model.MainValTooltip
);
and in capabilities
"tooltips": {
"supportedTypes": {
"default": true,
"canvas": true
},
"roles": [
"tooltips"
]
},
Here in the menu I set the tooltip is my "page 2". However, when I set it to another page, nothing shows up. Any suggestions/ideas? Thanks!
Hi Anonymous,
if you're just using a measure, then you'd use the .withMeasure() function when creating.
I have created a branch in my sample repo for the card, with a commit detailing all changes I made to get this to work. You should be able to check this branch out and have a look.
The selection ID will work from the measure field; the tooltips field is not used in this case, so you may need to amend your approach as required.
Changes should be highlighted in the commit details, but to summarise what I did:
- Created a measureSelectionId property in my ICard interface
- Assigned the host object as a visual class property
- Added this to the view model function call signature, and updated this in the visual workflow
- Set this to null before we validate the view model
- Create a selection ID for the measure if the visual state is valid
- Add this to the third function parameter for the addTooltip call
I created a report page with the same measure on it, e.g.:
Added Length (mm) measure as report page tooltip filter
I set up the tooltip page as normal, e.g.:
Assigning tooltip page
Going back to the data roles, I'll now see that the Tooltip Page is showing in the Tooltip role:
So far, so good...
And, if I hover over, I get my page, e.g.:
Success!But... there's more! Even though this is a single measure, note that my report page has a column chart for a breakdown by category. Even though I only specify .withMeasure() in my createSelectionIdBuilder() call, the selection ID is smart enough to know that if I filter my visual by the category above (e.g. removing 0.5), then the report page will filter it out too, e.g.:Category filtering at visual level respected by report page tooltip
Hopefully this helps you out with your challenge.
Good luck!
Daniel
7 Replies
Hi Anonymous,
Have you reviewed this part of the doc? The addTooltip method has three parameters:
- The selected element
- A delegate that returns a VisualTooltipDataItem array - this parameter is used to handle a 'traditional' tooltip
- A function that returns the SelectionId for the element you're highlighting - this parameter is used to handle a 'canvas' (report page) tooltip
In your code, you're only using the second parameter, so the canvas tooltip code will not be triggered in the call.
In addition to supplying code to the third parameter you will need to have a SelectionId that will exactly match the categories and/or measures you have applied to the page you want to use as a tooltip. If these don't match exactly, then Power BI will fall-back to the default tooltip code in the second parameter.
You can see how this is implemented in the sample bar chart here. It might be worth checking this repo out so that you can track back through the invocation of this function so that you can see how the view model has been set up to support this.
I have another example in one of my visuals here, but the view model is crazy large so may be harder to track through than the sample bar chart.
Hopefully this provides some knowledge on the way forward.
Daniel
Thank you dm-p for spotting out the problem.
I went through the sample barchart example (not 100% I follow that selectionID definition though). My custom visual is a simple KPI card with a value displayed as a text svg element (like your difinity 2019 example), it seems in order to get the selectionID done with this, I need to modify quite a bit of my viewmodel, e.g. creating new class etc. If modifying my simple viewmodel into a complicated one like the sample barchart/violin is the only way, I'll do it. But I wonder how I can just add a simple selectionID onto my svg text value?
Thanks again.
Hi Anonymous,
if you're just using a measure, then you'd use the .withMeasure() function when creating.
I have created a branch in my sample repo for the card, with a commit detailing all changes I made to get this to work. You should be able to check this branch out and have a look.
The selection ID will work from the measure field; the tooltips field is not used in this case, so you may need to amend your approach as required.
Changes should be highlighted in the commit details, but to summarise what I did:
- Created a measureSelectionId property in my ICard interface
- Assigned the host object as a visual class property
- Added this to the view model function call signature, and updated this in the visual workflow
- Set this to null before we validate the view model
- Create a selection ID for the measure if the visual state is valid
- Add this to the third function parameter for the addTooltip call
I created a report page with the same measure on it, e.g.:
Added Length (mm) measure as report page tooltip filter
I set up the tooltip page as normal, e.g.:
Assigning tooltip page
Going back to the data roles, I'll now see that the Tooltip Page is showing in the Tooltip role:
So far, so good...
And, if I hover over, I get my page, e.g.:
Success!But... there's more! Even though this is a single measure, note that my report page has a column chart for a breakdown by category. Even though I only specify .withMeasure() in my createSelectionIdBuilder() call, the selection ID is smart enough to know that if I filter my visual by the category above (e.g. removing 0.5), then the report page will filter it out too, e.g.:Category filtering at visual level respected by report page tooltip
Hopefully this helps you out with your challenge.
Good luck!
Daniel