Patternfly Logo

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 Exit delay Animation duration
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 properties
NameTypeRequiredDefaultDescription
animationDurationnumberNo300CSS fade transition animation duration
appendToHTMLElement | ((ref?: HTMLElement) => HTMLElement)No() => document.bodyThe element to append the tooltip to, defaults to body
aria'describedby' | 'labelledby' | 'none'No'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' | HTMLElementNo- no longer used. if you want to constrain the popper to a specific element use the appendTo prop instead
childrenReactElement<any>NoThe 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>
classNamestringNo''Tooltip additional class
contentReact.ReactNodeYesTooltip content
distancenumberNo15Distance of the tooltip to its target, defaults to 15
enableFlipbooleanNotrueIf true, tries to keep the tooltip in view by flipping it if necessary
entryDelaynumberNo0Delay in ms before the tooltip appears
exitDelaynumberNo0Delay in ms before the tooltip disappears
flipBehavior'flip' | ('top' | 'bottom' | 'left' | 'right')[]No['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.
idstringNo`pf-tooltip-${pfTooltipIdCounter++}`id of the tooltip
Deprecated: isAppLauncherbooleanNo- no longer used
isContentLeftAlignedbooleanNofalseFlag to indicate that the text content is left aligned
isVisiblebooleanNofalsevalue for visibility when trigger is 'manual'
maxWidthstringNotooltipMaxWidth.valueMaximum width of the tooltip (default 18.75rem)
position'auto' | 'top' | 'bottom' | 'left' | 'right'No'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>NoThe 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- no longer used
triggerstringNo'mouseenter focus'Tooltip trigger: click, mouseenter, focus, manual Set to manual to trigger tooltip programmatically (through the isVisible prop)
zIndexnumberNo9999z-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
1rem
.pf-c-tooltip--pf-c-tooltip__content--PaddingBottom
0.5rem
.pf-c-tooltip--pf-c-tooltip__content--PaddingLeft
1rem
.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.9375rem
.pf-c-tooltip--pf-c-tooltip__arrow--Height
0.9375rem
.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