Tooltips
The Tooltip component is a styled container for content that should be displayed when triggered by an OverlayTrigger or TooltipTrigger. It does not exhibit any dynamic behavior on its own.
TooltipTriggers are simpler to use, and their associated Tooltips are shown and hidden using CSS visibility rules.
In contrast to OverlayTriggers, the markup always exists in the DOM.
TooltipTriggers are an easy way to create CSS-driven tooltips with the tooltip content created inline with the triggering element. The content of the tooltip is wrapped in a Tooltip component for ease of styling. Please note that the TooltipTrigger will add a lot of markup to the DOM if you are using it in a highly repeated layout.
ReferenceError: React is not definedSince the tooltip property is of type Node, you may add markup to the tooltip, such as links.
ReferenceError: React is not definedThe trigger is manual, so the visibility of the tooltip is controlled by the display prop.
ReferenceError: React is not definedProps
Tooltip props
| Property | Required | Type | Default | Description |
|---|---|---|---|---|
isSticky | no | Boolean | false | Whether the tooltip hover is sticky or not |
size | no | oneOf(['auto', 'sm', 'md', 'lg']) | auto | Size of the tooltip |
visible | no | Boolean | true | Whether the tooltip contents are visible |
TooltipTrigger props
| Property | Required | Type | Default | Description |
|---|---|---|---|---|
clickHideDelay | no | Number | 1000 | How long (in milliseconds) to wait before hiding after click |
display | no | Boolean | false | if trigger is set to manual controls whether or not the tooltip is visible |
isSticky | no | Boolean | false | Whether the tooltip hover is sticky or not |
onEntered | no | Func | () => {} | Callback that is called after the tooltip is shown |
onExited | no | Func | () => {} | Callback that is called after the tooltip is hidden |
placement | no | oneOf(['left', 'right', 'bottom', 'top']) | top | Placement of tooltip in relation to target |
size | no | oneOf(['auto', 'sm', 'md', 'lg']) | auto | Size of the tooltip |
theme | no | oneOf(['light', 'dark']) | dark | Theme of tooltip background and text |
tooltip | yes | Node | Tooltip content - will be wrapped in a Tooltip component | |
trigger | no | oneOf(['hover', 'click', 'manual']) | hover | Action to trigger showing tooltip |
Imports
Import React components (including CSS):
import {Tooltip, TooltipTrigger} from 'pivotal-ui/react/tooltip';Import CSS only:
import 'pivotal-ui/css/tooltips';