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

Hover to view tooltip
Copied to clipboard

Tooltip positions

Tooltip Position
Hover to view tooltip
Copied to clipboard

Props

Tooltip Props

The Tooltip component accepts the following props.

NameTypeRequiredDefaultDescription
positionenum'top'Tooltip position
triggerstring'mouseenter focus'Tooltip trigger: click, mouseenter, focus
enableFlipbooltrueIf true, tries to keep the tooltip in view by flipping it if necessary
classNamestringnullTooltip additional class
contentnodeTooltip content
childrenelementThe reference element to which the tooltip is relatively placed to
entryDelaynumber500Delay in ms before the tooltip appears
exitDelaynumber500Delay in ms before the tooltip disappears
appendTounion() => 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)

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