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

[Anonymous]

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.

"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);
    }
}

[aminb06400]

I am experiencing the same issue with context menus in my custom visuals. The menu appears on the top left corner of the screen after using the drillthrough functionallity.

[v-qiuyu-msft]

Hi all, 

As the issue happens with the custom visual, I would suggest you post a thread in this forum to get help: 

https://community.powerbi.com/t5/Custom-Visuals-Development/bd-p/CustomVisualsDevelopmentDiscussion

Best Regards,
Qiuyun Yu