Tooltip

A tooltip is a small, temporary, overlay window that provides additional information about an on-screen element.

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'triggerRef ? 'polite' : 'off'Determines whether the tooltip is an aria-live region. If the triggerRef 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'.
childrenReactElement<any>The trigger reference element to which the Tooltip is relatively placed to. If you cannot wrap the element with the Tooltip, you can use the triggerRef 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
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)
minWidthstring | 'trigger'Minimum width of the tooltip. If set to "trigger", the minimum width will be set to the reference element width.
onTooltipHidden() => void() => {}Callback when tooltip's hide transition has finished executing
position| TooltipPosition | '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.
triggerstring'mouseenter focus'Tooltip trigger: click, mouseenter, focus, manual Set to manual to trigger tooltip programmatically (through the isVisible prop)
triggerRefHTMLElement | (() => HTMLElement) | React.RefObject<any>The trigger reference element to which the Tooltip is relatively placed to. If you can wrap the element with the Tooltip, you can use the children prop instead, or both props together. When passed along with the trigger prop, the div element that wraps the trigger will be removed. Usage: <Tooltip triggerRef={() => document.getElementById('reference-element')} />
zIndexnumber9999z-index of the tooltip

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-tooltip--pf-v6-c-tooltip--MaxWidth
18.75rem
.pf-v6-c-tooltip--pf-v6-c-tooltip--BoxShadow
0px 4px 9px 0px rgba(41, 41, 41, 0.1500)
.pf-v6-c-tooltip--pf-v6-c-tooltip__content--PaddingBlockStart
0.5rem
.pf-v6-c-tooltip--pf-v6-c-tooltip__content--PaddingInlineEnd
1rem
.pf-v6-c-tooltip--pf-v6-c-tooltip__content--PaddingBlockEnd
0.5rem
.pf-v6-c-tooltip--pf-v6-c-tooltip__content--PaddingInlineStart
1rem
.pf-v6-c-tooltip--pf-v6-c-tooltip__content--Color
(In light theme) #ffffff
.pf-v6-c-tooltip--pf-v6-c-tooltip__content--BackgroundColor
(In light theme) #292929
.pf-v6-c-tooltip--pf-v6-c-tooltip__content--FontSize
0.75rem
.pf-v6-c-tooltip--pf-v6-c-tooltip__content--BorderRadius
6px
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--Width
0.9375rem
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--Height
0.9375rem
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--BackgroundColor
(In light theme) #292929
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--BoxShadow
0px 4px 9px 0px rgba(41, 41, 41, 0.1500)
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--m-top--TranslateX
-50%
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--m-top--TranslateY
50%
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--m-top--Rotate
45deg
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--m-right--TranslateX
-50%
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--m-right--TranslateY
-50%
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--m-right--Rotate
45deg
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--m-bottom--TranslateX
-50%
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--m-bottom--TranslateY
-50%
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--m-bottom--Rotate
45deg
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--m-left--TranslateX
50%
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--m-left--TranslateY
-50%
.pf-v6-c-tooltip--pf-v6-c-tooltip__arrow--m-left--Rotate
45deg
.pf-v6-c-tooltip:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right)--pf-v6-c-tooltip__arrow--InsetBlockEnd
undefined, 0
.pf-v6-c-tooltip:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right)--pf-v6-c-tooltip__arrow--InsetInlineStart
undefined, 50%
.pf-v6-c-tooltip:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right)--pf-v6-c-tooltip__arrow--TranslateX
-50%
.pf-v6-c-tooltip:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right)--pf-v6-c-tooltip__arrow--TranslateY
50%
.pf-v6-c-tooltip:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right)--pf-v6-c-tooltip__arrow--Rotate
45deg
.pf-v6-c-tooltip:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right)--pf-v6-c-tooltip__arrow--InsetBlockStart
undefined, 0
.pf-v6-c-tooltip:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right)--pf-v6-c-tooltip__arrow--InsetInlineStart
undefined, 50%
.pf-v6-c-tooltip:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right)--pf-v6-c-tooltip__arrow--TranslateX
-50%
.pf-v6-c-tooltip:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right)--pf-v6-c-tooltip__arrow--TranslateY
-50%
.pf-v6-c-tooltip:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right)--pf-v6-c-tooltip__arrow--Rotate
45deg
.pf-v6-c-tooltip:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom)--pf-v6-c-tooltip__arrow--InsetBlockStart
undefined, 50%
.pf-v6-c-tooltip:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom)--pf-v6-c-tooltip__arrow--InsetInlineEnd
undefined, 0
.pf-v6-c-tooltip:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom)--pf-v6-c-tooltip__arrow--TranslateX
50%
.pf-v6-c-tooltip:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom)--pf-v6-c-tooltip__arrow--TranslateY
-50%
.pf-v6-c-tooltip:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom)--pf-v6-c-tooltip__arrow--Rotate
45deg
.pf-v6-c-tooltip:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom)--pf-v6-c-tooltip__arrow--InsetBlockStart
undefined, 50%
.pf-v6-c-tooltip:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom)--pf-v6-c-tooltip__arrow--InsetInlineStart
undefined, 0
.pf-v6-c-tooltip:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom)--pf-v6-c-tooltip__arrow--TranslateX
-50%
.pf-v6-c-tooltip:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom)--pf-v6-c-tooltip__arrow--TranslateY
-50%
.pf-v6-c-tooltip:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom)--pf-v6-c-tooltip__arrow--Rotate
45deg
.pf-v6-c-tooltip:is(.pf-m-left-top, .pf-m-right-top)--pf-v6-c-tooltip__arrow--InsetBlockStart
0
.pf-v6-c-tooltip:is(.pf-m-left-top, .pf-m-right-top)--pf-v6-c-tooltip__arrow--TranslateY
50%
.pf-v6-c-tooltip:is(.pf-m-left-bottom, .pf-m-right-bottom)--pf-v6-c-tooltip__arrow--InsetBlockStart
auto
.pf-v6-c-tooltip:is(.pf-m-left-bottom, .pf-m-right-bottom)--pf-v6-c-tooltip__arrow--InsetBlockEnd
0
.pf-v6-c-tooltip:is(.pf-m-top-left, .pf-m-bottom-left)--pf-v6-c-tooltip__arrow--InsetInlineStart
0
.pf-v6-c-tooltip:is(.pf-m-top-left, .pf-m-bottom-left)--pf-v6-c-tooltip__arrow--TranslateX
50%
.pf-v6-c-tooltip:is(.pf-m-top-right, .pf-m-bottom-right)--pf-v6-c-tooltip__arrow--InsetInlineEnd
0
.pf-v6-c-tooltip:is(.pf-m-top-right, .pf-m-bottom-right)--pf-v6-c-tooltip__arrow--InsetInlineStart
auto