React

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)() => document.bodyThe element to append the tooltip to, defaults to body
aria'describedby' | 'labelledby''describedby'Aria-labelledby or aria-describedby for tooltip
boundary'scrollParent' | 'window' | 'viewport' | HTMLElement'window'If enableFlip is true, the tooltip responds to this boundary
childrenReactElement<any>The reference element to which the tooltip is relatively placed to
classNamestring''Tooltip additional class
contentReact.ReactNodeTooltip content
distancenumber15Distance of the tooltip to its target, defaults to 15
enableFlipbooleantrueIf true, tries to keep the tooltip in view by flipping it if necessary
entryDelaynumber500Delay in ms before the tooltip appears
exitDelaynumber500Delay in ms before the tooltip disappears
flipBehavior'flip' | ('top' | 'bottom' | 'left' | 'right')[]['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.
isAppLauncherbooleanfalseIf true, displays as an application launcher
maxWidthstringtooltipMaxWidth && tooltipMaxWidth.valueMaximum width of the tooltip (default 12.5rem)
position'auto' | 'top' | 'bottom' | 'left' | 'right''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.
triggerstring'mouseenter focus'Tooltip trigger: click, mouseenter, focus, manual
isContentLeftAlignedbooleanfalseFlag to indicate that the text content is left aligned
isVisiblebooleanfalsevalue for visibility when trigger is 'manual'
zIndexnumber9999z-index of the tooltip
tippyPropsTippyProps{}additional Props to pass through to tippy.js
idstring''ID
TooltipContent properties
NameTypeRequiredDefaultDescription
classNamestringPopoverContent additional class
childrenReact.ReactNodePopoverContent content
isLeftAlignedbooleanFlag 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