Styles
Using this Component
Peeks are used to display contextually relevant information in the form of: previews; interactive details; or full values of truncated items.
Peeks are always used in conjunction with other UI elements.
Content
Only text content can be placed within tooltips. Avoid text longer than 100 characters.
Alternatives
For labeling elements or providing brief feature information, consider UITooltip or UIProtip. For more details on when to use each component, see the Tooltips vs. Peeks learn Fabric module.
Structure
1. Content Area
Most of a peek is dedicated to the rectangular content area. Peeks are not limited to text content, and may contain complex or interactive components. The width of the content area should reflect the expected size of the peek contents. Default width of peeks should be 180px unless explicitly stipulated otherwise.
2. Pointer
Peeks always point to their triggering element. Pointers are placed in the middle of one of the peek’s four sides.
Behavior
Peeks themselves are non-interactive containers, but they may contain a variety of interactive elements.
Peeks may appear from various triggers, including on hover, on click, or from other timing/behavioral factors.
Timing
When appearing on hover, peeks should most often appear after long hover (500ms) over the triggering element. In rare circumstances, tooltips may appear immediately on hover, but this should be avoided.
Peeks triggered by hovering should be dismissed 500ms after moving the cursor off the triggering element.
Placement
Because peeks extend beyond the bounds of the triggering element, be sure that placement of the peek will not cause it to appear outside the bounds of the page window.
Playground Coming Soon!
Styles
Using this Component
Peeks are used to display contextually relevant information in the form of: previews; interactive details; or full values of truncated items.
Peeks are always used in conjunction with other UI elements.
Content
Only text content can be placed within tooltips. Avoid text longer than 100 characters.
Alternatives
For labeling elements or providing brief feature information, consider UITooltip or UIProtip. For more details on when to use each component, see the Tooltips vs. Peeks learn Fabric module.
Structure
1. Content Area
Most of a peek is dedicated to the rectangular content area. Peeks are not limited to text content, and may contain complex or interactive components. The width of the content area should reflect the expected size of the peek contents. Default width of peeks should be 180px unless explicitly stipulated otherwise.
2. Pointer
Peeks always point to their triggering element. Pointers are placed in the middle of one of the peek’s four sides.
Behavior
Peeks themselves are non-interactive containers, but they may contain a variety of interactive elements.
Peeks may appear from various triggers, including on hover, on click, or from other timing/behavioral factors.
Timing
When appearing on hover, peeks should most often appear after long hover (500ms) over the triggering element. In rare circumstances, tooltips may appear immediately on hover, but this should be avoided.
Peeks triggered by hovering should be dismissed 500ms after moving the cursor off the triggering element.
Placement
Because peeks extend beyond the bounds of the triggering element, be sure that placement of the peek will not cause it to appear outside the bounds of the page window.