Does a tooltip require close button?

Question

I'm working on tooltips, when I was told there are some tooltips that have close buttons. Is a tooltip with a close button user friendly?

Answer 1

To know if the tooltip should be closable by the user, we should know when it gets displayed.

• As a mouse-over: no, it is hidden, when the user moves away.
• On some event: How would it get closed otherwise? Time is not a good option as it would a break accessibility guidelines.
• Click in text line: Not necessary, but I would provide this option as stackexchange is doing it. Users like to have control.

In general I would provide a close button. Usually it doesn't destroy a design but most people will like it.

Answer 2

The thing with tooltips (as with everything else on screen) is that it increases cognitive load and requires to be processed (read) by the user.

So the general question to ask is: does the user need (or want) to see the tooltip permanently, or should be allowed to close it? Is the tooltip really helpful or trivial?

I'd say that tooltips in general need to be visible only as long as they convey important message to the user. So they should have close button or disappear themselves after some other user input (mouse hover, click on associated element, fixing the problem etc.), or time delay (but as it was stated in previous answers - it is at odds with good accessibility guidelines, so should be used only for trivial information).

TL; DR;

In the current context what is shown in your screenshot I see two bad UX issues and would advise not to put close button on your tooltip.

1. There was a problem with username and/or password. This happens very often and most of the people know what to do in this situation: You need to select username input field, reenter your username, press tab or click to select password field, reenter password and then press enter or click on submit button. For user to click to close popup is a redundant click operation (unless the popup blocks the input fields, which then is a terrible placement and I would suggest to show this message as a text string bellow the form and not as a tooltip).

2. A tooltip is generally associated with an element and has a pointer towards it. Your tooltip says "There was a problem" and points at the submit button As if the submit button was clicked incorrectly or is somehow responsible for wrong username/password. :) So either you point it at the username/password field or use string text error message under the form.

Answer 3

I agree with Harijs' answer.

You need to address the question of why you are using the Tooltip for error handling in the first place. Here is a helpful article:

In order to display error messages on forms, you need to consider the following four basic rules:

1. The error message needs to be short and meaningful.

2. The placement of the message needs to be associated with the field.

3. The message style needs to be separated from the style of the field labels and instructions.

4. The style of the error field needs to be different than the normal field.

Source: http://www.nomensa.com/blog/2010/4-rules-for-displaying-error-messages-from-a-user-experience-perspective/

You should also not use tooltips for error messages.

Is the supplemental information an error, warning, or status? If so, use another UI element, such as a balloon, error message, or status bar. Notification area icon infotips are an exception because they can be used to show status information.

Source: http://msdn.microsoft.com/en-us/library/aa511495.aspx#rightcontrol

Consider also the conditions to use Tooltips in the first place as outlined in another SE post here:

To tooltip or not to tooltip?

I highly recommend you try a different approach for your error handling especially within the login. Here are some great examples:

Using colour:

Using the whitespace on the right:

Below each field:

This example looks tooltip-esque but I believe the error message stays there as long as the validation marks it as wrong. It could be dynamic or when the user clicks on log in.

Answer 4

I would definitely use a close button on tooltips for websites that are responsive since there is no such thing as hover on a touch screen device.

This would be in cases where the tooltip is accessed via a click instead of a hover. In my work I strive to have a single method for accessing this type of information to keep a code base small and have the user only need to learn one way of doing things no matter which device they happen to be using right then.

In practice this has led me to avoid using hover at all because touch screen devices are becoming so popular.

Answer 5

I think for tooltips the "close" button serves the purpose of reassuring the user that this is indeed a tooltip and it can be closed. It's a quick fix for cases when users are inexperienced with interfaces, and definitely not a requirement.

Remember that you have to teach the users how to use your apps, not just give them "faster horses".

But in this specific example, I don't think this message should be shown in a tooltip, but in an appearing text field that lists all the encountered errors.