cancel
Showing results for 
Search instead for 
Did you mean: 

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

 

 

Status: New
Comments
Frequent Visitor

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.

Community Support

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