Skip to content
PatternFly logo

Tooltip

A tooltip is in-app messaging used to identify elements on a page with short, clarifying text.

Examples

Basic

Tooltip react ref

Tooltip selector ref

On icon with dynamic content

When the tooltip is used as a wrapper and its content will dynamically update, the aria prop should have a value of "none" passed in. This prevents assistive technologies from announcing the tooltip contents more than once. Additionally, the aria-live prop should have a value of "polite" passed in, in order for assistive technologies to announce when the tooltip contents gets updated.

When using a React or selector ref with a tooltip that has dynamic content, the aria and aria-live props do not need to be manually passed in.

Options

position (will flip if enableFlip is true). The 'auto' position requires enableFlip to be set to true.
Entry delay (ms) Exit delay (ms) Animation duration (ms)
flip behavior examples (enableFlip has to be true). "flip" will try to flip the tooltip to the opposite of the starting position. The second option ensures that there are 3 escape positions for every possible starting position (default). This setting is ignored if position prop is set to 'auto'.

Props

Tooltip

*required
NameTypeDefaultDescription
contentrequiredReact.ReactNodeTooltip content
animationDurationnumber300CSS fade transition animation duration
appendToHTMLElement | ((ref?: HTMLElement) => HTMLElement)() => document.bodyThe element to append the tooltip to, defaults to body
aria'describedby' | 'labelledby' | 'none''describedby'aria-labelledby or aria-describedby for tooltip. The trigger will be cloned to add the aria attribute, and the corresponding id in the form of 'pf-tooltip-#' is added to the content container. If you don't want that or prefer to add the aria attribute yourself on the trigger, set aria to 'none'.
aria-live'off' | 'polite'reference ? 'polite' : 'off'Determines whether the tooltip is an aria-live region. If the reference prop is passed in the default behavior is 'polite' in order to ensure the tooltip contents is announced to assistive technologies. Otherwise the default behavior is 'off'.
Deprecated: boundary'scrollParent' | 'window' | 'viewport' | HTMLElement- no longer used. if you want to constrain the popper to a specific element use the appendTo prop instead
childrenReactElement<any>The reference element to which the Tooltip is relatively placed to. If you cannot wrap the reference with the Tooltip, you can use the reference prop instead. Usage: <Tooltip><Button>Reference</Button></Tooltip>
classNamestring''Tooltip additional class
distancenumber15Distance of the tooltip to its target, defaults to 15
enableFlipbooleantrueIf true, tries to keep the tooltip in view by flipping it if necessary
entryDelaynumber300Delay in ms before the tooltip appears
exitDelaynumber300Delay in ms before the tooltip disappears, Avoid passing in a value of "0", as users should be given ample time to move their mouse from the trigger to the tooltip content without the content being hidden.
flipBehavior'flip' | ( | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' )[]['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom']The desired position to flip the tooltip to if the initial position is not possible. By setting this prop to 'flip' it attempts to flip the tooltip to the opposite side if there is no space. You can also pass an array of positions that determines the flip order. It should contain the initial position followed by alternative positions if that position is unavailable. Example: Initial position is 'top'. Button with tooltip is in the top right corner. 'flipBehavior' is set to ['top', 'right', 'left']. Since there is no space to the top, it checks if right is available. There's also no space to the right, so it finally shows the tooltip on the left.
idstring`pf-tooltip-${pfTooltipIdCounter++}`id of the tooltip
Deprecated: isAppLauncherboolean- no longer used
isContentLeftAlignedbooleanfalseFlag to indicate that the text content is left aligned
isVisiblebooleanfalsevalue for visibility when trigger is 'manual'
maxWidthstringtooltipMaxWidth.valueMaximum width of the tooltip (default 18.75rem)
onTooltipHidden() => void() => {}Callback when tooltip's hide transition has finished executing
positionTooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end''top'Tooltip position. Note: With 'enableFlip' set to true, it will change the position if there is not enough space for the starting position. The behavior of where it flips to can be controlled through the flipBehavior prop. The 'auto' position chooses the side with the most space. The 'auto' position requires the 'enableFlip' prop to be true.
referenceHTMLElement | (() => HTMLElement) | React.RefObject<any>The reference element to which the Tooltip is relatively placed to. If you can wrap the reference with the Tooltip, you can use the children prop instead. Usage: <Tooltip reference={() => document.getElementById('reference-element')} />
removeFindDomNodeBetabooleanfalseOpt-in for updated popper that does not use findDOMNode.
Deprecated: tippyPropsPartial<TippyProps>- no longer used
triggerstring'mouseenter focus'Tooltip trigger: click, mouseenter, focus, manual Set to manual to trigger tooltip programmatically (through the isVisible prop)
zIndexnumber9999z-index of the tooltip

CSS variables

.pf-c-tooltip--pf-c-tooltip--MaxWidth
18.75rem
.pf-c-tooltip--pf-c-tooltip--BoxShadow
0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
.pf-c-tooltip--pf-c-tooltip__content--PaddingTop
0.5rem
.pf-c-tooltip--pf-c-tooltip__content--PaddingRight
0.5rem
.pf-c-tooltip--pf-c-tooltip__content--PaddingBottom
0.5rem
.pf-c-tooltip--pf-c-tooltip__content--PaddingLeft
0.5rem
.pf-c-tooltip--pf-c-tooltip__content--Color
#fff
.pf-c-tooltip--pf-c-tooltip__content--BackgroundColor
#151515
.pf-c-tooltip--pf-c-tooltip__content--FontSize
0.875rem
.pf-c-tooltip--pf-c-tooltip__arrow--Width
0.5rem
.pf-c-tooltip--pf-c-tooltip__arrow--Height
0.5rem
.pf-c-tooltip--pf-c-tooltip__arrow--m-top--TranslateX
-50%
.pf-c-tooltip--pf-c-tooltip__arrow--m-top--TranslateY
50%
.pf-c-tooltip--pf-c-tooltip__arrow--m-top--Rotate
45deg
.pf-c-tooltip--pf-c-tooltip__arrow--m-right--TranslateX
-50%
.pf-c-tooltip--pf-c-tooltip__arrow--m-right--TranslateY
-50%
.pf-c-tooltip--pf-c-tooltip__arrow--m-right--Rotate
45deg
.pf-c-tooltip--pf-c-tooltip__arrow--m-bottom--TranslateX
-50%
.pf-c-tooltip--pf-c-tooltip__arrow--m-bottom--TranslateY
-50%
.pf-c-tooltip--pf-c-tooltip__arrow--m-bottom--Rotate
45deg
.pf-c-tooltip--pf-c-tooltip__arrow--m-left--TranslateX
50%
.pf-c-tooltip--pf-c-tooltip__arrow--m-left--TranslateY
-50%
.pf-c-tooltip--pf-c-tooltip__arrow--m-left--Rotate
45deg

View source on GitHub