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.
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 definedReferenceError: React is not definedIf 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.
Props
| Property | Required | Type | Default | Description |
|---|---|---|---|---|
delay | no | Number | Number of milliseconds to delay show and hide | |
delayHide | no | Number | Number of milliseconds to delay hide | |
delayShow | no | Number | Number of milliseconds to delay show | |
disableScrim | no | Boolean | false | Set to true to make tooltips stay open when clicking outside |
display | no | Boolean | false | Whether or not to show the overlay |
isSticky | no | Boolean | false | Whether the tooltip hover is sticky or not |
onEntered | no | Function | Callback that is called after the overlay is shown | |
onExited | no | Function | Callback that is called after the overlay is hidden | |
overlay | no | Node | An element or text to overlay next to the target | |
pin | no | Boolean | true | Whether or not to reposition overlays to stay in the window |
placement | no | oneOf('top', 'bottom', 'left', 'right') | 'right' | Placement of overlay in relation to target |
theme | no | oneOf(['light', 'dark']) | dark | Theme of tooltip background and text |
trigger | no | oneOf('hover', 'click', 'focus', 'manual') | 'hover' | Action to trigger showing overlay |
Imports
Import React components (including CSS):
import {OverlayTrigger} from 'pivotal-ui/react/overlay-trigger';