Set overlay position relative to element, not to page

yeah (bump)

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Continuing the discussion from Set overlay position relative to element, not to page:

The Problem:
There are similar posts about this but most are closed by now, the problem is when using Open overlay interactions I often use the Manual positioning for menus and as the prototype grows I may have several menus that I have to manually move into the desired position.

The Proposal
It would be very useful and time saving to be able to set the overlay position relative to the element rather than the page. Currently you can set basic positions like top right bottom center etc. but that’s for placement on the screen thus not particularly helpful for things like menus.

I would like to set the position top left or bottom right of the element that triggered the overlay, something like the following:

There could be more options to account for center positioning as well and we should be able to set if it needs to sit inside or outside the element (bottom left / outside for instance). Another way possibly, as a workaround could be to allow setting of default locations say if I set an overlay to the bottom right of an element the next time I select Manual positioning for an overlay it defaults to the bottom right?

Perhaps this is another ticket but the bigger issue is how main components treat the overlay interaction in that they are not inherited and persisted by the component’s instance. Even if/when the instances retains the overlay interaction, there’s no way to set different interactions directly on the resulting overlay, so the initial problem noted in this request would still exist.

Any help or update to this would be greatly appreciated, I know I’m not the only one experiencing this and it would lead to a much improved workflow, thanks!

Thanks for the feedback!

We’ll pass this onto our team for consideration.

+1 This would have solved so easily my component that needs tooltip… Now I have to place manually…

This can be a serious pain point when designing prototypes with tooltips or overlays or when mimicking framework behavior like Bootstrap. It is especially true when you introduce multiple viewports through variables that affect the auto layout positions but not overlay positions.

Relative to page vs relative to component would be a great improvement.

Exactly the same problem. I need tooltips and the component is not a solution because the z-position of the tooltips can not be controlled globally (which would be a more elegant solution). Since I’m using overlays as a workaround, being able to position the overlay relatively to the trigger element instead of the page could speed up the work.

I found a workaround. Using a hover event in the component set to a component that has a tooltip as an absolute position outside of the trigger element. Then when using this trigger component be sure in autolayout to use “First on top” as a setting in the top container and avoid the “Clip content” checkbox so the tooltip is not cropped and appears on top of the next elements.

This is a sorely needed feature for creating prototypes using components and is one of the biggest time wasters for our team when prototyping.

Sick of having to detach components which makes updates a tedious process, creating silly pseudo components that don’t play nice with our design libraries, and having to prototype from multiple component instances instead of being able to do so from the main component… you know, like how components are meant to work.

Giving the option to set overlay position relative to component would fix all of this.

Yes please. Unlike frame-relative orientations, the manual option cannot be adjusted for multiple interactions at once, which is a huge pain.