Tooltips vs. Peeks
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.](https://assets-global.website-files.com/5cf947e00b64afb4055c0e08/5d8e6f63255b9806f765d627_Learn%20-%20Peeks%20-%201.png)
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.](https://assets-global.website-files.com/5cf947e00b64afb4055c0e08/5d8e6f634eedac1c48aafbed_Learn%20-%20Peeks%20-%202.png)
![Use peeks for actionable popovers.](https://assets-global.website-files.com/5cf947e00b64afb4055c0e08/5d8e6f63105d862dbf72ca0a_Learn%20-%20Peeks%20-%203.png)
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