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

Data Days is here! Join us now for 60+ days of learning, challenges, and connection. Learn more

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 Employee
Microsoft Employee

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

 

Helpful resources

Announcements
Fabric Data Days is here Carousel

Fabric Data Days 2026

Don't miss out on Data Days, June 15 through August 7. Learn Fabric, Power BI, SQL, AI and more.

May Power BI Update Carousel

Power BI Monthly Update - May 2026

Check out the May 2026 Power BI update to learn about new features.

Power BI DataViz World Championships carousel

Power BI DataViz World Championships - June 2026

A new Power BI DataViz World Championship is coming this June! Don't miss out on submitting your entry.

Top Solution Authors