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).


I think either is appropriate, but you have to be clear with your language. For the starred favorite example, you have a few ways of phrasing it.

  • Mark as Favorite / Remove Favorite (result of action)
  • Not saved as favorite / Saved as Favorited (current state)

In this case, the first option sounds way better to me. I find the tooltip (which I only now just noticed) to be confusing for stackeoverflow's. Mostly I think it's because it's describing the state that should be true in order for you to click it. Same for the upvote, "this is a good question." I think your choice of verb tense is very important with tooltips.

But also, as long as the visual state is clear, you can get away with a lot (which is why the favorite thing on stack overflow probably isn't a big deal).

  • Adobe Illustrator handles this in a way that I find confusing. Their "Constrain Width and Height Proportions" button has the same tooltip text for both states of the button. You're left trying to decipher what the feature does by looking at the icon on the button. Seeing a broken chain link makes my mind wonder, "Will clicking this button break the constraint? Or is the constraint broken now?" The tooltip being no help at all leads me, in situations where I haven't used Illustrator for a few days, to where I have to experiment with the button to re-learn what it does. – Cary Millsap Feb 16 '18 at 18:17

Your Answer

