Skip to main content

Pivotal UI

v19.2.2
Components / Tooltips

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.

Basic example

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 defined
Markup example

Since the tooltip property is of type Node, you may add markup to the tooltip, such as links.

ReferenceError: React is not defined
Manual trigger example

The trigger is manual, so the visibility of the tooltip is controlled by the display prop.

ReferenceError: React is not defined

Props

Tooltip props

PropertyRequiredTypeDefaultDescription
isStickynoBooleanfalseWhether the tooltip hover is sticky or not
sizenooneOf(['auto', 'sm', 'md', 'lg'])autoSize of the tooltip
visiblenoBooleantrueWhether the tooltip contents are visible

TooltipTrigger props

PropertyRequiredTypeDefaultDescription
clickHideDelaynoNumber1000How long (in milliseconds) to wait before hiding after click
disablednoBooleanfalseDisables the tooltip trigger, causing the tooltip not to display regardless of other settings
displaynoBooleanfalseif trigger is set to manual controls whether or not the tooltip is visible
isStickynoBooleanfalseWhether the tooltip hover is sticky or not
onEnterednoFunc() => {}Callback that is called after the tooltip is shown
onExitednoFunc() => {}Callback that is called after the tooltip is hidden
placementnooneOf(['left', 'right', 'bottom', 'top'])topPlacement of tooltip in relation to target
sizenooneOf(['auto', 'sm', 'md', 'lg'])autoSize of the tooltip
themenooneOf(['light', 'dark'])darkTheme of tooltip background and text
tooltipyesNodeTooltip content - will be wrapped in a Tooltip component
triggernooneOf(['hover', 'click', 'manual'])hoverAction 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';