Custom visual: Tooltip closes after opening

[arthur_clifford]

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 hides (expected) but then if I attempt to show the same tooltip with the same info it will show but then immediately hide.

However, if I mouse out of the visual and then back in I get normal behavior. 

I can confirm that the tooltip when hidden is actually still in the html of the page but does have a display:none style setting. No function I have for hiding the visual is being called to hide it.

I tried dispatching each a mouseout and then pointerleave and pointerenter event to see if that would trick the visual into thinking whatever happens when I mouse out of the visual and back in was happening so I could get the better behavior. But that seemed to break stuff rather than fix it.

ChatGBT seemed to think that there is a context property for the tooltip args. I tried its recommendation and set a context: {selectionID:Number(new Date()) in order to 'cache bust' the tooltip hoping that would reset whatever is hiding it, but that didn't seem to work. Also VisualStudioCode IDE doesn't seem to think that's context is one of the tooltip options. 

Anybody out there developing visuals that support report-page tooltips or on the PowerBI team that may have un into this problem or would be able to look at why when mouse/pointer leave/out of a visual the tooltip state resets and why that is not true on hide? Is there a way to force the visibility on the tooltip when the tooltipService.show doesn't work?

I should note that thus far I am intentionally not using the tooltipServiceWrapper because I am detecting hover events in my visual and am hitting an api to get identifiers back before showing the tooltip. The tooltipServiceWrapper seems to be more about showing the latest data an and taking care of the hover detection. 

[arthur_clifford]

I seem to have fixed the problem I was having, though technically its working around the deeper concern I have with the hide that the mouseover does on the tooltip display.

I have a hoverTarget class that I am using to add/remove pointer events to my map. And the debounce timeout I have in it was including notifying of a mousemove (cancel event) within the timeout. More specifically I was doing a check within the timeout and either emitting a cancelled or hovered event depending on certain conditions.

By emitting the cancelled event before setting the timeout I am able to handle that in the visual and hide the tooltip faster than the powerbi event that hides the tooltip can be triggered. Since that powerbi event was causing the issue, not-letting it trigger means my flashing tooltip issue has been 'solved'.

I'm not really able to setup a test case at present as tracking down this issue has put me a little behind schedule. However, I can suggest a test case if someone is willing to verify the behavior:
All that should be required is a simple visual with a button that when clicked opens a tooltip, in particular a report page tooltip.
Rather than creating a new tooltip wrapper, the visual should use options.host.tooltipService.show(...) and the show options should indude identifiers.

This would also require a report page tooltip and that the visual tester be configured to show tooltips and point it to the tooltip report page.

Testing the visual would mean showing the tooltip via button click. Mousing over the tooltip to dismiss it, then clicking the button again.

If doing so causes the tooltip to show then hide then that would confirm it has nothign to do with all the other stuff happening in my code and that it is a bug that should be reported to Microsoft.

[arthur_clifford]

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. 

[dm-p]

Hi @arthur_clifford,

I've developed many visuals and have never run into this problem with tooltips. Tooltip invocation in Power BI is pretty straightforward—you either populate the data manually (for a standard tooltip) or provide a valid selection ID based on the data Power BI initially sends to the data view for a report page tooltip. If the selection ID is not valid, it usually displays a standard tooltip, as it cannot resolve your selector against the data model. Tooltips are shown with .show() and hidden with .hide() events, wired up to event handlers as needed. Power BI should take care of the .hide() event via the visual host when the mouse is moved out of the visual, so normally, a subsequent .show() by your logic is called; this should work as expected.

I'm having trouble understanding how you are implementing your specific use case. Admittedly, I haven't tried populating tooltip info via an API call, but my understanding is that I might use the following high-level workflow, so that I'm using the tooltip service APIs as intended:

• Desired mouse event to invoke the tooltip is fired
• The API is called (assuming you're using fetch()...)
• In the promise callback (fetch.then()), build tooltip information and call .show() via the tooltip service

In the last step, I'd include any selection IDs I need for the given dataset row so that Power BI displays the correct tooltip for the desired row context.

If you're calling an API and trying to fabricate selection IDs, this is likely not going to be supported and sounds like something that Power BI may not be able to reconcile, unless you are somehow getting a valid data view that you can generate legitimate selection IDs against. However, I don't think it'll be easy to assist further without seeing some code - can you share this?

Many thanks,

Daniel

[arthur_clifford]

Daniel, I added what I thought was a response to your question but I think it posted as a second comment on my original post.
I'm using this code to create my selectionIds

  const selectionId = this.host.createSelectionIdBuilder()

                        .withTable(this.dataView.table, rowIndex)

                        .createSelectionId();

If you can see my previous post you can see that I am doing a communication with an api on on response sending info back to the powerbi visual such that it is showing results in the popup. So at a high level what you outlined is roughly what is happening with the addition of visual to iframe intercommunication.

I've somewhat improved things by catching mouse mouse movement better,sooner, to try to hide the tooltip before the user can trigger a mouse over on the tooltip itself. 

Do you know how I would bring this up with the PowerBI developers if I had to? I'd like to know if the mouse over or enter event for the tooltip is triggering a different close function than the one in the tooltip service and whether there is some state or style that it should clear that it isn't.