Should a tooltip describe the next stage or the current stage

03 Mar 2014

What should be presented in a simple tooltip when hovering over a stateful widget, such as a button like the up/down vote and star buttons on this question? Is it important to describe the current state or the next-click action? Or even indicate its a toggle (which can be un-done with a second click) rather than an action?

Keeping the tooltip short, unambiguous and easy-to-understand, can be quite difficult.

This is somewhat related to the question about whether the button itself should indicate state or next-action: Should a toggle button show its current state or the state to which it will change?, and was inspired by a specific question about the tooltip on the 'star' button on SE questions from meta-StackOverflow.

Sometimes it may be easy enough to describe the general purpose of the button, where the user will already know about the action/effect, e.g. "toggle play/pause" — the user almost certainly knows what play & pause are, they just need to know that this button switches between the two states.

But other times you may need to describe the action/effect as well, or the purpose behind it, e.g. the up/down vote buttons, or some toggle of an advanced setting, so you're starting to potentially describe the switching, the effect of each state, and what the current state is or what the next-click will do. Sometimes you may even need to indicate that the effect will occur immediately (e.g. checkboxes are commonly used in preferences/dialogs either with immediate effect as well as delayed until you hit Apply or OK), or if there are limits to how often, or how many times you can click them (e.g. some SE vote buttons have limitations: you can't remove a vote months later, you can't re-up-vote a comment after removing your up-vote).

n About Face 2.0 (there is a v3 but I haven't got it) Cooper and Reimann (2003, pp. 341-2) treat this subject under the heading "Flip-flop buttons: A selection idiom to avoid". I strongly suggest to consult this book as I will only present an excerpt:

Flip-flop button controls are very efficient. They save space by controlling two mutually exclusive options with a single control. The problem with flip-flop controls is that they fail to fulfill the second duty of every control - to inform the user of their current state. If the button says ON when the state is off, it is unclear what the setting is. If it is OFF when the state is off, however, where is the ON button? Don't use them. Not on buttons and no on menus! The authors (and I think of these as an authority on the subject) presents two possible solutions: You should either spell the button's action out as a verb phrase (e.g., Switch to portrait mode, thereby sacrificing some of the saved space) or use some other technique entirely (e.g., two radio buttons).