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 positions

Tooltip Position
I have a tooltip!
Copied to clipboard

Props

Tooltip Props

The Tooltip component accepts the following props.

NameTypeRequiredDefaultDescription
position'top' | 'bottom' | 'left' | 'right''top'Tooltip position
triggerstring'mouseenter focus'Tooltip trigger: click, mouseenter, focus
enableFlipbooleantrueIf true, tries to keep the tooltip in view by flipping it if necessary
classNamestring''Tooltip additional class
contentReact.ReactNodeTooltip content
childrenReactElement<any>The reference element to which the tooltip is relatively placed to
entryDelaynumber500Delay in ms before the tooltip appears
exitDelaynumber500Delay in ms before the tooltip disappears
appendToElement | ((ref: Element) => Element)() => document.bodyThe element to append the tooltip to, defaults to body
zIndexnumber9999z-index of the tooltip
maxWidthstringtooltipMaxWidth && tooltipMaxWidth.valueMaximum width of the tooltip (default 12.5rem)
isAppLauncherbooleanfalseIf true, displays as an application launcher
distancenumber15Distance of the tooltip to its target, defaults to 15

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