Nav open / close arrow

Overview

One common point of confusion when building an interface using Fabric is whether to use a Tooltip or a Peek. Both are popovers often triggered on hover, but which is correct in what scenario?

Use a UITooltip when:

  • Describing something's function
    e.g. What’s this icon button mean?
    Note: This is often displayed using a protip
  • Describing something's current state
    e.g. Why is this button disabled?
Use tooltips for button state explanations.

Use a UIPeek when:

  • Displaying the full value of a truncated item
  • Previewing content or details of an element or page link
    e.g. Trust Check, or Wikipedia-style page preview
  • Displaying interactive content within the popover
    e.g. presenting an action to the user
Use peeks for full values of truncated items.Use peeks for actionable popovers.

Differences to Note

  • Tooltips are only ever made visible on hover, while Peeks may be triggered on hover, click, or other interactions.
  • Content can be highlighted and copied from Peeks, but not Tooltips.
  • Tooltips can only contain plain text, but Peeks can contain other components, e.g. headers, buttons, etc.

Test Your Knowledge!

Last Updated

Sep 27, 2019