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

Simple tooltip

I have a tooltip!
Copied to clipboard

Tooltip on icon

Copied to clipboard

Tooltip positions

Tooltip Position
Copied to clipboard

Props

Tooltip Props

The Tooltip component accepts the following props.

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
isVisiblebooleanfalsevalue for visibility when trigger is 'manual'
zIndexnumber9999z-index of the tooltip
tippyPropsTippyProps{}additional Props to pass through to tippy.js

CSS Variables

--pf-c-tooltip--MaxWidthc_tooltip_MaxWidth18.75rem
--pf-c-tooltip__arrow--Heightc_tooltip__arrow_Height0.9375rem
--pf-c-tooltip__arrow--Widthc_tooltip__arrow_Width0.9375rem
--pf-c-tooltip__arrow--m-bottom--Transformc_tooltip__arrow_m_bottom_Transformtranslate(-50%,-50%) rotate(45deg)
--pf-c-tooltip__arrow--m-left--Transformc_tooltip__arrow_m_left_Transformtranslate(50%,-50%) rotate(45deg)
--pf-c-tooltip__arrow--m-right--Transformc_tooltip__arrow_m_right_Transformtranslate(-50%,-50%) rotate(45deg)
--pf-c-tooltip__arrow--m-top--Transformc_tooltip__arrow_m_top_Transformtranslate(-50%,50%) rotate(45deg)
--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_FontSize0.875rem
--pf-c-tooltip__content--PaddingBottomc_tooltip__content_PaddingBottom1rem
--pf-c-tooltip__content--PaddingLeftc_tooltip__content_PaddingLeft1.5rem
--pf-c-tooltip__content--PaddingRightc_tooltip__content_PaddingRight1.5rem
--pf-c-tooltip__content--PaddingTopc_tooltip__content_PaddingTop1rem