I've got a loan applicant form. All the fields are required and most of them got a describing tooltip. I struggle when it comes to the point how to show the tooltips. Hide them until a user clicks a "i" icon behind the field or show the tooltip on focus?

We've done a testing but the result was indecisive 10:10 so there is no clear result.

this would be the solution "on focus"

p.s. excuse my bad pronunciation- and grammar-skills ;)

  • 1
    You say the testing results were indecisive, but it is unclear what indecisive means in this instance. If one of the tests was to show the tooltip on focus automatically what is the failure criteria of this test? Is it that the user didn't spot it, or that they didn't like it?
    – JonW
    Commented Mar 9, 2012 at 11:37
  • 1
    with test i mean the question "what do you prefer? on focus or an icon?" 10 liked the focus thing and 10 the icon... arguments were for e.g. "i would be annoyed by tooltips – which i din't force to – pop up"
    – Robin
    Commented Mar 9, 2012 at 13:18

5 Answers 5


When you tested this, how was the question phrased?

Was it:

"Can you complete this form? Which one did you like better?"

Or was it:

"Which method of invoking tool tip do you like better?"

If it is the latter, then you may have inadvertently influenced the outcome in favor of clicking the "i", because the question itself explains to the user what clicking "i" does, whereas in real life, not all users would know what it is.

I think A/B testing would be beneficial, so you can go by more objective metrics (i.e. time-to-complete, accuracy, abandonment), rather than verbal user feedback.

After all, user's action speaks louder than words :)

  • It was more like "Which method of invoking tool tip do you like better?"... we will do multivariante testing anyway - thanks for your input.
    – Robin
    Commented Mar 12, 2012 at 9:33

While (as @inkmarble mentioned) clicking may be more effort compared to a mouse-over we now also have to keep in mind the growing amount of users on touch-only devices. With the current state of the art, there simply is no way to mouse-over an icon on a touch device, thus making this help information inaccessible to this user group.

Example: I recently got really frustrated with Facebook because I couldn't find that edit option that I knew existed because I had used it before. Only after a while I wondered if it had been one of these grey little icons that only show up when you hover over the text-entry - and it was. My device is a convertible, so I could switch modes. Otherwise I could not have edited my text at all.

Another webpage solved this differently: They simply did both. The help-text showed up when hovering over it, but also onclick. This accomodated for touch devices as well as mouse-users who would want the text to stay visible even when moving away. At the same time it did not harm the "normal" mouse-over users. So overall: if technically feasible I'd give the hybrid approach a go, too.

  • Yup, I'd do both hover and click toggle on the info button. Commented Oct 16, 2014 at 15:52

A tooltip is usually a short descriptive phrase - I've seen suggestions that they should be "5 or 6 words" or "1-2 short lines". They were originally intended as a helpful reminder for a button or field, targeted at a user who knew the details but needed the reminder.

The help information you're displaying seems to be quite a lot more substantial, perhaps aimed at the ocassional or first time user.

I'd suggest using a hybrid approach:

  • On mouse over, display a conventional tooltip, including "(Click for more)" (localised, of course) at the end
  • If/When the user does click, display the larger piece of help text with additional information.
  1. I believe loan applicants who come to fill, will either have knowledge or may be novice. In either case the "i" icon is beneficial, so on mouse hover the description box can pop-over on the page. Clicking is an effort that is more than a mouse-hover.

  2. Other way is that, all the Information can be aligned to the RHS of the form - with numbers assigned to the location - such as users need not even mouse hover the information "i" icon, but can be readily sitting there. If the information is too lengthier - then the "i" icon can remain, and the information can pop inside the RHS column without disrupting the form.

  • re:1 i've attached an image how to tooltip is shown with focus. so an icon would be useless i this case imho re:2 i believe there would be to much information to show them all at once. the goal is to give the user a helping hand giving him some infos while typing in the fields. (in my opinion a additional click interrupts the filling process...)
    – Robin
    Commented Mar 9, 2012 at 11:27

@inkmarble is correct. label should be right aligned.

  • "EUR" code position can be changed. It looks left right align within the single element.

  • Be default first field should be focused. So we can show help text nearby textfield when we focus that field. It should make sense, user can read while entering that field.

  • Please revisit the width of text fields. (Max digits for amount)

NOTE: If we give mouse hover for "i", user needs to find the help text when entering the data.

  • 1
    The OP isn't asking about the form layout itself, but how to handle displaying the tooltip help information. Whether the form layout should be changed around is a different question entirely.
    – JonW
    Commented Mar 9, 2012 at 11:39
  • thanks for the notes. - Yes, the labels will be right aligned. - at the moment the EUR is within the background image. - the width is for technical reasons i can't change :-/ - If we use the "i" the tooltip will be placed next to the "i"
    – Robin
    Commented Mar 9, 2012 at 11:39
  • Yes, my second point is about displaying help information for the particular field. We don't hide the help information, because this is amount related form thats why i mentioned, it can be mandatory.
    – jelumalai
    Commented Mar 9, 2012 at 11:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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