Labeled graphic - Avoid popup covering other buttons

In the interaction "Labeled graphic", you have limited control of how the popup is positioned. In some of our projects, this has been an issue since you might not want the popup to cover too much information.

Some of our user testings made it clear that it's confusing that there's no close button on the popup (if not tested on phone).

The size of the popup depends on both the content and the screen size.

Anyone else who has struggled with this?

We ended up mapping the logic of the direction of the popup. Here's the result:

The arrows in the image above indicate the direction of the popup.

  

 

Examples of the size variations depending on the screen and mode:

Small

Medium

Full width (on a large screen):