cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Anonymous
Not applicable

Tooltips custom visuals table

Hello,

I want to create a tooltips for table custom visual, but i have a problem.tooltips.PNG

My table is type htmlelement, I looked at the tutorial for creating tooltips here but the example is not put in full.

I want information about the defintion of function addTooltip or maybe full example please because that's where the problem liestooltips 2.PNG

 

1 ACCEPTED SOLUTION

Look at the code from the link that I provided you.

this.tooltipServiceWrapper.addTooltip<LineDotPoint>(
     dotsSelectionMerged,
     (tooltipEvent: TooltipEventArgs<LineDotPoint>) => {
         return this.getTooltipDataItems(tooltipEvent.data);
    }
);

You just need to call method addTooltip and provide couple of arguments there.

The first argument is d3 selection that is a target for a tooltip.

The second argument is a callback function that has to return an array of objects that contain tooltip inforamation.

For instance, you could write even something simple like below to test how it works:

        this.tooltipServiceWrapper.addTooltip(
            warning.title, // target d3 selection, replace by your selection
            () => {
                return [{
                    displayName: null,
                    value: "some text that will be displayed in a tooltip"
                }];
            });

 

Kind Regards,

Evgenii Elkin,
Software Engineer
Microsoft Power BI Custom Visuals
pbicvsupport@microsoft.com

 

View solution in original post

3 REPLIES 3
v-evelk
Microsoft
Microsoft

Hi,

 

You could look for the answer in one of our public repository, this one, for example.

 

Kind Regards,

 

Evgenii Elkin,
Software Engineer
Microsoft Power BI Custom Visuals
pbicvsupport@microsoft.com

Anonymous
Not applicable

@v-evelkThanks for the example but it does not help me to solve the problem. I did not mention it but I use version 3.1.1 of power bi tools. i want to use the tooltips on a datatable jquery, but i have errors like that :

Capture.PNG

I consulted a lot of examples online and I tried to understand then the reproduires but I can not

 

Look at the code from the link that I provided you.

this.tooltipServiceWrapper.addTooltip<LineDotPoint>(
     dotsSelectionMerged,
     (tooltipEvent: TooltipEventArgs<LineDotPoint>) => {
         return this.getTooltipDataItems(tooltipEvent.data);
    }
);

You just need to call method addTooltip and provide couple of arguments there.

The first argument is d3 selection that is a target for a tooltip.

The second argument is a callback function that has to return an array of objects that contain tooltip inforamation.

For instance, you could write even something simple like below to test how it works:

        this.tooltipServiceWrapper.addTooltip(
            warning.title, // target d3 selection, replace by your selection
            () => {
                return [{
                    displayName: null,
                    value: "some text that will be displayed in a tooltip"
                }];
            });

 

Kind Regards,

Evgenii Elkin,
Software Engineer
Microsoft Power BI Custom Visuals
pbicvsupport@microsoft.com

 

View solution in original post

Helpful resources

Announcements
PBI_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

Get Ready for Power BI Dev Camp

Microsoft named a Leader in The Forrester Wave

Microsoft received the highest score of any vendor in both the strategy and current offering categories.

Get Ready for Power BI Dev Camp

Power BI Dev Camp - September 30th, 2021

Mark your calendars and join us for our next Power BI Dev Camp!

PowerPlatform 768x460.png

Microsoft Learn

Check out our new Discover Your Career Path blog post series and get all the details.

Top Solution Authors