Picchu

Tooltip

Guidance

A tooltip is supplemental content associated with a specific UI control, and offered within a small rectangular box that only appears when users hover a mouse pointer over the corresponding UI control.

Good tooltips briefly describe unlabeled controls or provide a bit of additional info for labeled controls, when this is useful. They can also help customers navigate the UI by offering additional—not redundant—information about control labels, icons, links, etc.

  • Use tooltips sparingly (or not at all). Tooltips are an interruption. A tooltip can be as distracting as a pop-up, so don't use them unless they add significant value.
  • Keep the tooltip text concise. Tooltips are perfect for short sentences and sentence fragments. Large blocks of text are difficult to read and overwhelming.
  • Create helpful, supplemental tooltip text. Tooltip text must be informative. Don't restate the obvious or just repeat what is already on the screen. Because tooltip text isn't always visible, it should be supplemental info that users don't have to read. Communicate important info using self-explanatory control labels or in-place supplemental text.
  • Use images when appropriate. Sometimes it's better to use an image in a tooltip. For example, when the user touches a hyperlink, you can use a tooltip to show a preview of the linked page.
  • Do not include interactive controls or images that might look like interactive controls inside the tooltip. Users cannot interact with tooltips since moving the mouse makes them disappear.

Demo

See the Pen Tooltip demo 1 by Microsoft.com (@microsoft) on CodePen.