Hi, I have an info tooltip reusable element that the user can click to get more information. The reusable element consists of an i icon and a group focus. The reference element for the group focus is the i icon. It works perfectly except when the group focus message is long, it falls beneath the screen.
How can I make it so that the group focus is always fully on the screen, such as it moves itself up to fit the whole text?
There is a similar topic to this with the solution here: Group Focus goes off screen? - #6 by samnichols
However this means that the group focus is always in one position on the screen, whereas in my case the group focus should be tied to the i icon.
Thanks in advance for the help.
For longer messages inside a group focus, and considering you have so many here, you might consider using a floating group that contains the info for all the fields and opening that if someone clicks an icon. Using a group focus on top of a popup could become a huge headache on different devices, so that might create a better UX (and save you a hassle).
That’s a good idea and one that I could do, but this message is probably the longest one I have. The rest are only 2-3 lines. The headache would be having to redo all of the popups to have the floating group as I have about 10 popups using this method at the moment. I appreciate the suggestion though.
