Nav open / close arrow


Using this Component

Tooltips are used to display clarifying labels or details when hovering over another element. Common uses include text labels for icon actions, and explanations of other UI elements.


Only text content can be placed within tooltips. Avoid text longer than 100 characters.


Tooltips should not be used to display truncation, nor can they contain interactive elements. Use a UIPeek for those cases. If you want to combine a tooltip with an information icon, use the UIProtip component. For more details on when to use each component, see the Tooltips vs. Peeks learn Fabric module.


1. Content Area

Most of a tooltip is dedicated to the rectangular text content area. The width of the content area should be responsive to the text of the tooltip, but the full width should not exceed 180px in most cases.

2. Pointer

Tooltips always point to their triggering element. Pointers are placed in the middle of one of the tooltip’s four sides.


Tooltips themselves are non-interactive. They appear as a result of hover interactions with other components. Tooltip content can’t be highlighted & copied, unlike Peeks.


Tooltips 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.

Tooltips should be dismissed immediately when moving the cursor off of the triggering element.


Because tooltips extend beyond the bounds of the triggering element, be sure that placement of the tooltip will not cause it to appear outside the bounds of the page window.

Related Components

Last Updated

September 1, 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

UITooltip should only wrap the element that we want to display the tooltip over. Do not wrap multiple elements in one UITooltip. Generally UITooltip should only wrap a UIIcon or a text element.

Code Path & Props

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

Example Code