Forum Discussion

arthur_clifford's avatar
arthur_clifford
Frequent Visitor
2 years ago

Custom visual: Tooltip closes after opening

I have been able to create a visual that uses host.visualTooltipService to show a tooltip that is a Report Page tooltip.    However, I'm having a problem in that if I mouse over the toolitp it hide...
Need Help
arthur_clifford's avatar
arthur_clifford
Frequent Visitor
2 years ago

Hi Daniel,

 

I was trying to keep the relevant parts simple, my total visual is a bit more complicated.
I am iframing an angular app within my visual as I have a map application. The map interface has a "hovertip" that detects when the mouse hovers over the map and then calls an api under my control to retrieve data under the cursor. Normally I would display a tooltip like display in the map, however, I wanted to leverage the Report Page tooltip.

So the map app knows that it is in an embedded context and sends a message back to the visual with the point coordinate and a map-feature identifier (an id).

You would think that was the hard part but it actually is working well.

Note the rectangular area with the heading Shelby is based on a report page.  The map and toolbar above it are my app and in an iframe in a visual. The stuff above the visual are slicers and cards in power BI. So, I undstood enough to get that far. 


The visual handles a show-tooltip message from the iframe and after gathering relevant information to determine how to apply the id, I execute:

                     const selectionId = this.host.createSelectionIdBuilder()
                        .withTable(this.dataView.table, rowIndex)
                        .createSelectionId();
                    const options: any = {
                        dataItems: tooltipData,
                        identities: [selectionId],
                        coordinates: [x, y + 32],
                        isTouchEvent: false
                    }
                   
                    if (this._timeout) clearTimeout(this._timeout);
                    this._timeout = setTimeout(() => {
                        if (this.vhostTooltipService.visible(true)) {
                            this.host.tooltipService.move(options);
                        } else {
                            this.host.tooltipService.show(options);
                        }
                        this.tooltipVisible = true;
                    }, 500);
 
I have tried with and without the timeout. I've tried hiding before calling show both outdide and inside the timeout. Bu the behavior is generally the same. 

While I do have the ability to send and receive a message from my iframe to the visual to hide the tooltip. If I comment out the hide code the problem still persists.

If I move the mouse on the map I will get toolitps as expected and as long as I don't move over the tooltip.

If I go over the tooltip it hides itself (my hide code is not executed) and if I hover over the previous point it will show the tooltip very briefly then hide it; whatever mechanism is hiding the tooltip on mouse over is not getting unset.

Even wierder is that if I hover over a diffrent part of the map it will work ok but when I go over the same area the old tooltip was, the tooltip will do the flashing.

I have tried showing the toolitp at -5000,-5000 in the event there was a container or something handling mouse events but that didn't work either.

Again, leaving the visual and coming back in will heal the behavior.

It feels like what happens when  you think you have destroyed an angular component but one of its handlers has not been removed as a listener or is not checking whether the component has been destroyed. Something that is checking whether the mouse is within an area of a tooltip area that has been removed and thinks the tooltip is in a hide state and so is enforcing the hide.