Group Focus Overflows Off Screen

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.

Could just make it scrollable?

That is a good suggestion, however, how would I make the max height so that it never goes beneath the screen?

The best way to do this is to make the icon its own reusable element, then the group focus inside of that.

Open the group focus (within the icon) and it should work as expected.

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).

I am not entirely sure what you mean. This is what I have got at the moment:

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.

Gotcha. That makes sense.

This topic was automatically closed after 14 days. New replies are no longer allowed.