Tool Tip Invitation

Working Solution · Last modified July 15, 2009

When the invitation to interact with an object would benefit from an written description, show a tool tip when the mouse cursor hovers over the target area.

The tooltip copy should be a short verbal phrase that calls the user to action, such as 'Click to Edit'.

Show this tooltip within a very short amount of time (less than a quarter of a second) or immediately when the mouse hovers over the interaction area.

Keep the tooltip visible the whole time the user has the mouse over the interaction area, and remove it promptly when the mouse leaves the interaction area.


Delicious Bookmark this on Delicious

What Problem Does This Solve?

Designer needs to cue the user about what will happen if they click the mouse on the hovered object.

When to Use This Pattern

  • You want to invite the user to click or interact with the object being hovered over.
  • You want to make it clear that something will happen when the user clicks on the object being hovered over.
  • The user is interacting directly with the object (e.g., inline editing).
  • You need a textual description to make it explicit what will happen when the user interacts with the object.
  • You want to entice the user to interact with the feature.

What's the Solution?

  • Provide a tool tip when the mouse is over the target area that calls the user to action.
  • Show the tooltip within a very short amount of time (< .25 second) or immediately when the mouse hovers over the interaction area.
  • Keep the tooltip visible the whole time the user has the mouse over the interaction area.
  • Remove the tooltip when the mouse leaves the interaction area.
  • Provide a short phrase that calls the user to action.
  • Use verbal phrases like 'Click to Edit'.

Why Use This Pattern?

For more information, see the rationale for Invitation patterns.

Accessibility

See the general discussion about accessibility for Invitation patterns.