2

In Bootstrap and other frameworks, you are able to create and design your own tooltip instead of using the regular title-tag. You are also free to place that tooltip above, below, to the left or to the right of the text input box.

Due to several reasons (Screen magnifiers, the visual focus of the user and so on), there is no reason to place the tooltip to the left or to the right of an input box.

So, where shall one place the tooltip? Above or below the input box?

Could provide me with some pros and cons on these two options: Above or below.

| improve this question | |
  • 1
    Could you add some visual examples of what you mean? I can't see why a tootlip to the left or right of an input field wouldn't work as well as above or below. – MJB Aug 18 '16 at 8:08
2

A lot of it depends upon your page layout. Placing tooltips above the element in question is a common spot, with one rationale being that the user is working in a linear fashion and has already completed whatever is above and is not likely to be bothered if it is covered by a tooltip... but that may or may not apply in your case.

I've recently been trying out using tooltips that appear in a sidebar on the right of the page that is mostly dedicated to that task: each tip appears one at a time as the user interacts with an element, but the tip doesn't cover anything on the page. It also gives the user the option to open up a modal with even more information if they need it. This has been testing VERY well for us, but it complements the more wizard-like flow we've designed, rather than giving the user a single large form.

Bear in mind, the most important thing to be sure of is that the content itself is helpful - the user will be focused on your field for the most part, so as long as the tooltip supports their immediate task of completing that field (and doesn't get in the way), you should be ok.

FWIW, I am not sure I have ever seen tooltips appear BELOW form elements... that space is often reserved for in-line validation messages, and you would not want to risk hiding those

| improve this answer | |
  • Mattynabib: Thanks for your detailed reply to my question. The reason for NOT placing tooltips to the right of an input box is due to accessibility reasons. People who are using magnifying software, such as ZoomText or the built in zoom feature in MacOS, Windows7 and above etc, will be unaware of the existance of that tooltip. This since the tooltip will appear outside ot their magnified area. – Ilias Bennani Aug 19 '16 at 6:37
  • Would that issue apply to tooltips above a field as well? – Mattynabib Aug 19 '16 at 18:18
  • The problem I described in my comment does not apply to tooltips above or below the input field. – Ilias Bennani Aug 22 '16 at 6:28

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.