1

We have a form in our web app which allows users to create a list of "cards". Our system dynamically displays tooltips to help them enter high quality information. A simplified example might be entering names and addresses where our system asks the user to check that they have the name correct. The tooltip must display above the card because the we do not want to cover the content of the card.

First screen

The problem we have is making room to display the tooltips when the card is almost off the top of the screen:

Card off the top

Our current solution is to scroll the card down to a predictable place on the screen so we have room for the tooltips above the card. However, this feels like bad UX, we're moving an input on the screen just as the user is about to type in it.

Is this bad practice? Are there any obvious alternatives we are missing?

2

First off, I suggest you read this post to see if going with tooltips is even the right direction to go in.

Tooltips are meant to only be revealed while the cursor is hovering over it.

Secondly, you shouldn't be scrolling the page, unless this is after form submission and those are errors?

If those tooltips are relevant while the user has focus on that field, it would be better to just include it above the text:

Input example

0

I can think of a couple of possible solutions:

  1. display the messages inline underneath the input fields
  2. place a "sticky" bar at the top of the page that appears when the user scrolls down and only displays tooltips
  3. placing the tooltip beside the inputs may work except for in smaller devices where maybe just a tooltip icon, such as a questionmark, could appear and slide out when the user taps it

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.