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

Calling all Data Engineers! Fabric Data Engineer (Exam DP-700) live sessions are back! Starting October 16th. Sign up.

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

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

 

v-evelk
Microsoft Employee
Microsoft Employee

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
November Fabric Update Carousel

Fabric Monthly Update - November 2025

Check out the November 2025 Fabric update to learn about new features.

Fabric Data Days Carousel

Fabric Data Days

Advance your Data & AI career with 50 days of live learning, contests, hands-on challenges, study groups & certifications and more!

FabCon Atlanta 2026 carousel

FabCon Atlanta 2026

Join us at FabCon Atlanta, March 16-20, for the ultimate Fabric, Power BI, AI and SQL community-led event. Save $200 with code FABCOMM.

Users online (25)