cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Regular Visitor

Tooltip appearing in top left corner of browser when a field is added

Tooltips in custom visuals are appearing at the top left corner of the browser window in Power BI Online (screen position 0,0). This bug began around April 20, 2020. 

 

I thought this might be a bug in my custom visual or a bug caused by conflicting libraries so I tried to test using a newly created, basic visual. This bug occurs in the update counter visual that is created by default in a new visual which is attached with minor changes to show the tooltip on mouse down.

 

This bug appears when a field is added to a category and disappears when the visual is updated either through a selection in a different visual in the report or by changing options in the formatting pane or adding a measure. The bug reappears if the field is removed and a field is added again. In reports with multiple data roles, the issue reappears when all fields are removed from the visuals and fields are added back in again.

 

TooltipPositionBug1.pngTooltipPositionBug2.png

 

"use strict";

import "core-js/stable";
import "./../style/visual.less";
import powerbi from "powerbi-visuals-api";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import VisualObjectInstance = powerbi.VisualObjectInstance;
import DataView = powerbi.DataView;
import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;
import TooltipShowOptions = powerbi.extensibility.TooltipShowOptions;
import VisualUpdateType = powerbi.VisualUpdateType;
import IViewport = powerbi.IViewport;

import { VisualSettings } from "./settings";
export class Visual implements IVisual {
    private target: HTMLElement;
    private updateCount: number;
    private settings: VisualSettings;
    private textNode: Text;
    host: powerbi.extensibility.visual.IVisualHost;
    element: HTMLElement;
    updateOptions: VisualUpdateOptions;


    constructor(options: VisualConstructorOptions) {
        console.log('Visual constructor', options);
        this.target = options.element;
        this.updateCount = 0;
        this.host = options.host;
        
        if (document) {
            const new_p: HTMLElement = document.createElement("p");
            new_p.appendChild(document.createTextNode("Update count:"));
            const new_em: HTMLElement = document.createElement("em");
            this.textNode = document.createTextNode(this.updateCount.toString());
            new_em.appendChild(this.textNode);
            new_p.appendChild(new_em);
            this.target.appendChild(new_p);

            this.target.onmousedown = ((event) => {

                var category = this.updateOptions.dataViews[0].categorical.categories[0];

                let selectionId = this.host.createSelectionIdBuilder()
                    .withCategory(category, 0)
                    .createSelectionId().getKey();

                let ttip: TooltipShowOptions = {
                    dataItems: [
                        { displayName: "Update Count", value: "" + this.updateCount }
                    ],
                    identities: [selectionId],
                    coordinates: [100, 100],
                    isTouchEvent: false
                };

                this.host.tooltipService.show(ttip);
            })

            this.target.onmouseup = ((event) => {

                this.host.tooltipService.hide({
                    immediately: false,
                    isTouchEvent: false
                });
            }
            )
        }
    }

    public update(options: VisualUpdateOptions) {
        this.updateCount++;
 
        this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);

        if (this.textNode) {
            this.textNode.textContent = (this.updateCount).toString();
        }

        this.updateOptions = options;
    }

    private static parseSettings(dataView: DataView): VisualSettings {
        return <VisualSettings>VisualSettings.parse(dataView);
    }

    public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
        return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
    }
}
7 REPLIES 7
Highlighted
Frequent Visitor

Re: Tooltip appearing in top left corner of browser when a field is added

This problem is also occuring when using the drill trough context menu.

Highlighted
Microsoft
Microsoft

Re: Tooltip appearing in top left corner of browser when a field is added

Hello,

 

Thank you for noticing.

It's a known issue. Unfortunately, it's a problem in Power BI service itself, but not in some visual code.

It should be fixed soon.

 

Kind Regards,

 

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

Highlighted
New Member

Re: Tooltip appearing in top left corner of browser when a field is added

Any idea when the fix will be released ? I would like to demo a report which uses tooltips. 

Highlighted
New Member

Re: Tooltip appearing in top left corner of browser when a field is added

I am also experinceing this same issue within Power BI Desktop.

Highlighted
Microsoft
Microsoft

Re: Tooltip appearing in top left corner of browser when a field is added

This bug was fixed in service. ETA is June 6th, and the next version of the Desktop app.

 

Kind Regards,

 

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

Highlighted
Regular Visitor

Re: Tooltip appearing in top left corner of browser when a field is added

  • We have the same problem in Report Server.

We were using Power BI Report Server (January 2020) and everything worked fine.

Recently we've updated to Power BI Report Server (May 2020).

In one of my reports I'm using Power BI Certified, Radar/Polar Chart by xViz

 

When I first open report in browser it works fine. But when I navigate to other pages via bookmarks and then back to the first page, the tooltip jumps to the top left corner.

Highlighted
New Member

Re: Tooltip appearing in top left corner of browser when a field is added

Will this be fixed before the Sept release of Server version?

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Find your favorite faces from the community presenting at the Power Platform Community Conference!

Upcoming Events

Experience what’s next for Power BI

See the latest Power BI innovations, updates, and demos from the Microsoft Business Applications Launch Event.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Get Ready for Power BI Dev Camp

Get Ready for Power BI Dev Camp

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

Top Kudoed Authors