Context:
I’m trying to create a simple tooltip for an element, an icon for example, inside an Auto Layout.
Question:
What interaction do I need to use so that the tooltip can appear on hover near the icon, but without having any effect on the rest of the layout and surrounding items?
What happens now is the tooltip pushes the surrounding elements to make room for it self, rather than just hovering near the icon.
I tried the “Open Overlay”, but positioning settings are relative to the whole page, not the icon. So, centred, for example, means centred on the page, not centred in relation to the icon.
I’ve tried absolute positioning too, but that has other implications.
What am I missing? Is there a way to do this?
Thanks, and I hope this makes sense 
From my personal experience overlays works poorly when you make them a part of some component. Dropdown menus, calendars, tooltips etc works better with “overlay” interaction. When you embed them into the component itself you will struggle to make them work with other elements. They will overlap so you need know various trick how not to. Things like click outside to close becomes unavailable. And so on and so forth.
My take is to have all these overlays as separate layers and connect them to your trigger elements via “open overlay”. If you need them in your prototype for demo or testing purposes, you can always create special components for that, on the same page where the rest of screens are. If your screens are components you can swap target elements. You can overlay them, it’s much easier this way
1 Like