15

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?

enter image description here

Improve this question
4
  • 7
    I wouldn't call it a 'tooltip' if it requires the user to click something. I'd call it an alert or pop-up dialog. Commented Mar 26, 2014 at 20:42
  • yes i agree Phil, but there are some tooltips with close button on user hover something. Commented Mar 27, 2014 at 4:18
  • Then it's not a true tooltip, and shouldn't be called one. It's a pop-up dialog triggered by mousing over an element, and a bad design to boot. Commented Mar 27, 2014 at 17:31
  • I was asking myself the same thing whether to add a close icon. On desktop I didn't need one, it was triggered on hover but on "mobile" I added a close icon because there was not enough space to tap in a clear space. The user could tap the tooltip to make it go away but I felt it wasn't clear. I do wonder for a tooltip close icon on mobile would having the label dismiss or close matter matter vs close icon. Commented Dec 12, 2022 at 23:40

5 Answers 5

Reset to default
34

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.

Improve this answer
4
  • 10
    Agree, if it is a static tooltip that appears after a click (on a button) then a close button should be added and the tooltip should disappear when an other element is clicked. Tooltips that appear on hover don't require close buttons. Commented Mar 26, 2014 at 10:54
  • I agree with having a close button. When I'm interacting with a pop-up or a lightbox I click somewhere in the background for it to disappear. But I've come across many users who doesn't know this and look for a close button. Commented Mar 26, 2014 at 11:43
  • @nuwa I'd say that if the tooltip is triggered by a click event, then it needs a close button because users would expect another click to close it. However, if the tooltip appears on hover then it isn't required because it would be expected the disappear as soon as the mouse moves out. Commented Mar 26, 2014 at 17:27
  • I agree with @AlanChavez. Though, on mobile you would need a close button, unless the tooltip closes once the user clicks outside. Commented Mar 26, 2014 at 20:36
7

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.

Improve this answer
6

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:

example

Using the whitespace on the right:

example

Below each field:

example

example

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.

example

Improve this answer
1

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.

Improve this answer
3
  • I always have to mention, my mobile phone (Samsung S3) supports hover and I love it. Hope it gets more popular in the future. Commented Mar 27, 2014 at 8:11
  • how does it do that? Can it tell your finger is close to the screen or does it have a cursor or something? Commented Mar 27, 2014 at 14:48
  • 1
    Air view recognizes if your finger is nearby. This site describes it very well: allaboutgalaxys4.com/galaxy-s4-features-explained/air-view Commented Mar 27, 2014 at 15:09
0

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.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.