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

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

Reply
Anonymous
Not applicable

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!

2019_08_02_12_10_24_Power_BI.png

 

1 ACCEPTED SOLUTION

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:

I created a report page with the same measure on it, e.g.:

Added Length (mm) measure as report page tooltip filterAdded Length (mm) measure as report page tooltip filter

I set up the tooltip page as normal, e.g.:

Assigning tooltip pageAssigning 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...So far, so good...

And, if I hover over, I get my page, e.g.:

Success!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 tooltipCategory filtering at visual level respected by report page tooltip

Hopefully this helps you out with your challenge.

Good luck!

Daniel





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

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


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




View solution in original post

7 REPLIES 7
dm-p
Super User
Super User

Hi @Anonymous,

Have you reviewed this part of the doc? The addTooltip method has three parameters:

  1. The selected element
  2. A delegate that returns a VisualTooltipDataItem array - this parameter is used to handle a 'traditional' tooltip
  3. 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





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

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


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




Anonymous
Not applicable

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:

I created a report page with the same measure on it, e.g.:

Added Length (mm) measure as report page tooltip filterAdded Length (mm) measure as report page tooltip filter

I set up the tooltip page as normal, e.g.:

Assigning tooltip pageAssigning 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...So far, so good...

And, if I hover over, I get my page, e.g.:

Success!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 tooltipCategory filtering at visual level respected by report page tooltip

Hopefully this helps you out with your challenge.

Good luck!

Daniel





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

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


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




Anonymous
Not applicable

Thanks @dm-p 

Thank you so much for the detailed explanation and example.  I will modify my interface with selectionID too.

 

Anonymous
Not applicable

Hello,

 

I'm facing a very similar problem.

Can you please share the repository?

 

I really appreciate it, thank you.


@Anonymous wrote:

Thanks @dm-p 

Thank you so much for the detailed explanation and example.  I will modify my interface with selectionID too.

 



@Anonymous wrote:

Thanks @dm-p 

Thank you so much for the detailed explanation and example.  I will modify my interface with selectionID too.

 


 

Hi @Anonymous,

The repo link is in the post marked as the solution, albeit direct links to the branch and commit of interest.

The specifc repo link is here. Note that as per the links above, the example is in a branch off master named report-page-tooltip, so once you have cloned the repo you will need to check out this branch specifically to observe the changes documented above.

Good luck!

Daniel





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

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


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




Hi,

Im using amcharts 5 with react to show report page in custom visual but 

TooltipServiceWrapper is created for d3 i think
import { Selection } from "d3-selection";

addTooltip<T>(selection: Selection<any, any, any, any>, getTooltipInfoDelegate: (datapoint: T) => VisualTooltipDataItem[], getDataPointIdentity?: (datapoint: T) => ISelectionId, reloadTooltipDataOnMouseMove?: boolean): void;

the first parameter use d3 selection

in internet also didnt get the solution about it

how can i achive this with amcharts 5 verison can you please help me to impliement report pages as tooltip

Helpful resources

Announcements
July 2024 Power BI Update

Power BI Monthly Update - July 2024

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

PBI_Carousel_NL_June

Fabric Community Update - June 2024

Get the latest Fabric updates from Build 2024, key Skills Challenge voucher deadlines, top blogs, forum posts, and product ideas.

Top Solution Authors