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 full.

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

 

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]

     

3 Replies

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

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