Nav open / close arrow

Styles

Using this Component

Protips are used to provide extra information about a feature or field.


Content

Protips are standalone components that contain their own triggering element in the form of an “info” icon. As a result, only content that is “information” about a protip’s context should be displayed using a UIProtip.

The content of a protip is placed within a UITooltip. Only text content can be placed within tooltips. Avoid text longer than 100 characters.


Alternatives

For element labels or interactive content, see UITooltip and UIPeek, respectively. For details on when to use each component, see the Tooltips vs. Peeks learn Fabric module.

Structure

1. Info Icon

The info icon is the triggering element, and it always visible on screen.

2. Tooltip

The protip’s content is displayed within a UITooltip on hover. This appears above the info icon by default.

Behavior

Protips are standalone interactive elements. Their only behavior is to trigger a tooltip when hovering over an info icon.


Timing

Protips display their tooltip immediately on hover over the triggering “info” icon. The tooltip is be dismissed immediately when moving the cursor off of the icon.

Related Components

Last Updated

August 6, 2020

Coming soon...

Component code details for this component are not currently available, but we're working on it!

Checkout this UIKit component's code and comments in the codebase for usage examples, props, and more.

Eng Description

Code Path & Props

Up to date props can be found at the codepath above.

Example Code