Clarity: Dynamic placement of validation and tooltips based on screen-size

[MRamos62786]

Select one ... (check one with "x")

[ ] bug
[ ] feature request
[x] enhancement

Expected behavior

I'm struggling with how I should be presenting errors for small form factors. The default for validation errors appear in the top right which get completely cut off on smaller mobile devices. Aligning to the top left helps but as you can see below, the error is still getting cutoff. The ability to align a tooltip's content to the right may help in my scenario. Ideally, the size of the tooltip could be responsive based on the screen. I've searched through existing issues but haven't found anything useful, so I apologize if this is a duplicate.

Actual behavior

Tooltips are cutoff in smaller form factors.

Reproduction of behavior

Code a tooltip and emulate a small device.

[adityarb88]

Hi @MRamos62786. We want to provide the ability for a popover (tooltip here) to dynamically change direction and size depending on the screensize and the popover's position but it is not a priority for us right now. For now you will have manually make sure that you change its size and direction (using the size and direction classes) on smaller screens. I will keep this ticket open so that we can track it.

[MRamos62786]

@adityarb88, Sounds great and thank you for the quick response.

[jacobbutton]

I was about to post the nearly the same thing until I found this issue.

Glad you guys want to implement tooltips that react dynamically to screen size and orientation. But until that happens, could we get a tooltip-top or tooltip-bottom option for our tooltip location classes. All of the current classes (left, top-left, bottom-left, right, top-right, bottom-right) put the tooltip outside the view in my layout.

[reddolan]

We will be addressing this issue with the Forms Redux project

[mann-david]

Will this issue be seeing an update anytime soon?

Also, @reddolan: what is the "Forms Redux project"?

Thx.

[gnomeontherun]

The forms have been redesigned and are nearly complete. The change is we no longer have a tooltip for validation (which is poor usability to hide important notes), so see https://vmware.github.io/clarity/documentation/v0.12/forms. I think we can close this issue actually, as we won't be fixing this in the deprecated forms.

[MRamos62786]

@gnomeontherun There seem to be images missing from that page you've linked. Any idea if that's a known issue?

[gnomeontherun]

Strange, we'll fix that up thanks for pointing it out!

[mann-david]

OK, how about tooltips in general not running off the screen? I'm more interested in that than the forms/validation tooltip. Should I open a new issue?

[gnomeontherun]

We've got a similar request here already #1262.

[mann-david]

Thx. Missed that in my search.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.