Skip to content
Patternfly Logo

Tooltip

Examples

Basic

I have a tooltip!

Tooltip react ref

Tooltip selector ref

On icon

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'.
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
exitDelaynumber0Delay in ms before the tooltip disappears
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)
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')} />
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