Custom Visual Tooltip to show the Tooltip page

[Anonymous]

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!

[dm-p]

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

[Anonymous]

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.

[dm-p · 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:

• 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

[Anonymous]

Thanks @dm-p 

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

[Anonymous]

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.

---

[dm-p]

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

[deepbag]

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