Set overlay position relative to element, not to page

When creating overlays, there are cases when I want it to be positioned relative to the element that triggered it. For example, a tooltip that explains a button or image.

Currently the only way to do that is to manually position the overlay. What would be nice/more efficient is to have an option to choose how I want the position to be calculated-- relative to the entire page, or relative to the element itself–with the same set of position options (centered, top left, top right, etc) that we currently have for alignment. That way overlay positions can be set quickly without the need for manual fiddling.

3 Likes

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.

Screenshot 2023-11-01 at 11.46.57 AM

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!

2 Likes

Thanks for the feedback!

We’ll pass this onto our team for consideration.

2 Likes

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

2 Likes