Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
7 years ago
Solved

Tooltips custom visuals table

Hello, I want to create a tooltips for table custom visual, but i have a problem. My table is type htmlelement, I looked at the tutorial for creating tooltips here but the example is not put in...
helps
Tutorial Requests
  • v-evelk's avatar
    v-evelk
    7 years ago

    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
    [email protected]

     

Anonymous's avatar
Anonymous
Not applicable
7 years ago

v-evelk, Thanks 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 :

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

 

v-evelk's avatar
v-evelk
Microsoft Employee
7 years ago

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
[email protected]