Skip to main content

Pivotal UI

Components / Overlay trigger

Overlay trigger

OverlayTriggers are highly configurable. Their associated overlays do not show up in the DOM until triggered. This makes them ideal for highly repeated layouts such as lists.

Basic example

To create a tooltip where the contents are not inlined with the triggering element itself, use the OverlayTrigger component. If the overlay property passed into the OverlayTrigger will be displayed on hover, this is where the Tooltip can be used. This can be useful in situations where you want to have many different elements trigger the same tooltip. Tooltips are placed using the placement property on OverlayTrigger.

ReferenceError: React is not defined
Resizable tooltips
ReferenceError: React is not defined

If trigger is set to manual, display of the tooltip is entirely determined by the display prop, which is controlled by the end user and not by OverlayTrigger.


delaynoNumberNumber of milliseconds to delay show and hide
delayHidenoNumberNumber of milliseconds to delay hide
delayShownoNumberNumber of milliseconds to delay show
disableScrimnoBooleanfalseSet to true to make tooltips stay open when clicking outside
displaynoBooleanfalseWhether or not to show the overlay
isStickynoBooleanfalseWhether the tooltip hover is sticky or not
onEnterednoFunctionCallback that is called after the overlay is shown
onExitednoFunctionCallback that is called after the overlay is hidden
overlaynoNodeAn element or text to overlay next to the target
pinnoBooleantrueWhether or not to reposition overlays to stay in the window
placementnooneOf('top', 'bottom', 'left', 'right')'right'Placement of overlay in relation to target
themenooneOf(['light', 'dark'])darkTheme of tooltip background and text
triggernooneOf('hover', 'click', 'focus', 'manual')'hover'Action to trigger showing overlay


Import React components (including CSS):

import {OverlayTrigger} from 'pivotal-ui/react/overlay-trigger';