I am making a prototype game UI for a studio. This sometimes forces me to create scenarios that are not common to classic web or mobile app usage.

In this particular scenario I am making a Diablo-like type of mouseover. In short, when mouse is over an item, its description tooltip appears and when mouse leaves the tooltip disappears. Pretty standard. There’s an extra bit that the moused over object needs to be clickable. I am unable to achieve that with current Figma tools so I am dropping this simple idea for overlays to improve tooltip making.

First, let me describe the solutions I already tried and their downsides:

1. I am making a button component that has three variants: normal, hovered and pressed. The hovered variant is displayed while hovering. Within that variant I create a frame which acts as a tooltip and appears right beside the variant as its integral part.
   
   Downsides: When the component is placed on any canvas, the tooltip within hovered variant is subject to z-depth, meaning if I have several objects around, the tooltip will be displayed below other objects on canvas. Another downside is that the integrated tooltip frame is also subject to clipping, meaning if I place the component in a container that clips its content (scrollable frame), the tooltip will also be clipped.
   
   Suggestion: allow frames to be unclippable and always on top. (turning off clip content on a frame won’t cut it, if it’s a scrollable content)
    
2. I am making a separate frame which forms a tooltip. I am also making a button component that has three variants: normal, hovered and pressed. The hovered variant is displayed while hovering. I additionally apply a while hovering interaction to hovered variant and pointing to the tooltip frame I prepared earlier, and make the frame appear as an overlay. This neatly causes the tooltip to appear when the button is hovered over, and disappear when mouse leaves it, and is not affected by z-depth or clipping.
   
   Downsides: Overlay being overlay it blocks interaction of anything other than itself and it does that screen-wide, regardless of own size, for as long as it exists. This prevents the hovered button to be clickable. Clicking also won’t make it go away because while hovering doesn’t have close when clicking outside on this interaction.
   
   Solution: Make overlays capture interaction only within its borders, leaving everything around available. Alternatively give us a toggle to pick local- or screen-wide influence of an overlay.
    

Ideally I’d like the second solution be implemented. It seems to be giving the most control over components and overlays.