Skip to Content
Patternfly Logo

Tooltip

Tooltips are used to provide short, clarifying descriptions of elements on a page. They are typically used to clarify the meaning of icons.

ExamplesPropsCSS Variables

Examples

Basic

I have a tooltip!

With left aligned text

I have a tooltip!

On icon

Positions

Tooltip Position

Props

Tooltip properties
NameTypeRequiredDefaultDescription
appendToElement | ((ref: Element) => Element)No() => document.bodyThe element to append the tooltip to, defaults to body
aria'describedby' | 'labelledby'No'describedby'Aria-labelledby or aria-describedby for tooltip
boundary'scrollParent' | 'window' | 'viewport' | HTMLElementNo'window'If enableFlip is true, the tooltip responds to this boundary
childrenReactElement<any>YesThe reference element to which the tooltip is relatively placed to
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
entryDelaynumberNo500Delay in ms before the tooltip appears
exitDelaynumberNo500Delay 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.
isAppLauncherbooleanNofalseIf true, displays as an application launcher
maxWidthstringNotooltipMaxWidth && tooltipMaxWidth.valueMaximum width of the tooltip (default 12.5rem)
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.
triggerstringNo'mouseenter focus'Tooltip trigger: click, mouseenter, focus, manual
isContentLeftAlignedbooleanNofalseFlag to indicate that the text content is left aligned
isVisiblebooleanNofalsevalue for visibility when trigger is 'manual'
zIndexnumberNo9999z-index of the tooltip
tippyPropsPartial<TippyProps>No{}additional Props to pass through to tippy.js
idstringNo''ID
TooltipContent properties
NameTypeRequiredDefaultDescription
classNamestringNoPopoverContent additional class
childrenReact.ReactNodeYesPopoverContent content
isLeftAlignedbooleanNoFlag to align text to the left

CSS Variables

--pf-c-tooltip__arrow--Heightc_tooltip__arrow_Height
0.9375rem
--pf-c-tooltip__arrow--m-bottom--Transformc_tooltip__arrow_m_bottom_Transform
translate(-50%,-50%) rotate(45deg)
--pf-c-tooltip__arrow--m-left--Transformc_tooltip__arrow_m_left_Transform
translate(50%,-50%) rotate(45deg)
--pf-c-tooltip__arrow--m-right--Transformc_tooltip__arrow_m_right_Transform
translate(-50%,-50%) rotate(45deg)
--pf-c-tooltip__arrow--m-top--Transformc_tooltip__arrow_m_top_Transform
translate(-50%,50%) rotate(45deg)
--pf-c-tooltip__arrow--Widthc_tooltip__arrow_Width
0.9375rem
--pf-c-tooltip__content--BackgroundColorc_tooltip__content_BackgroundColor
#151515
--pf-c-tooltip__content--Colorc_tooltip__content_Color
#fff
--pf-c-tooltip__content--FontSizec_tooltip__content_FontSize
0.875rem
--pf-c-tooltip__content--PaddingBottomc_tooltip__content_PaddingBottom
1rem
--pf-c-tooltip__content--PaddingLeftc_tooltip__content_PaddingLeft
1.5rem
--pf-c-tooltip__content--PaddingRightc_tooltip__content_PaddingRight
1.5rem
--pf-c-tooltip__content--PaddingTopc_tooltip__content_PaddingTop
1rem
--pf-c-tooltip--MaxWidthc_tooltip_MaxWidth
18.75rem